/* ================= TOKENS ================= */
:root{
  --charcoal: #14181F;
  --charcoal-2: #1B212A;
  --paper: #F3F1EC;
  --paper-dim: #E7E5DE;
  --steel-line: #D6D3C9;

  --blue: #00529C;
  --blue-bright: #1D75CC;
  --red: #EE1C27;
  --red-bright: #FF4B44;
  --brand-gradient: linear-gradient(135deg, var(--blue) 0%, #7A3B8C 50%, var(--red) 100%);
  --brand-gradient-v: linear-gradient(180deg, var(--blue) 0%, #7A3B8C 55%, var(--red) 100%);
  --brand-gradient-v-rev: linear-gradient(180deg, var(--red) 0%, #7A3B8C 55%, var(--blue) 100%);

  /* aliases used through the stylesheet: red = primary/hot accent, blue = secondary/cool accent */
  --copper: var(--red);
  --copper-bright: var(--red-bright);
  --ember: var(--red-bright);
  --patina: var(--blue);
  --patina-bright: var(--blue-bright);

  --ink: #14181F;
  --ink-soft: #55575E;
  --paper-ink: #F3F1EC;
  --paper-ink-soft: #C3C7D0;

  --font-display: "Big Shoulders Display", sans-serif;
  --font-body: "Work Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  --radius: 4px;
  --wrap: 1180px;

  --mobile-bar-h: 34px;
  --mobile-actions-h: 58px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important;}
}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
ul{list-style:none; margin:0; padding:0;}
h1,h2,h3{margin:0; font-family:var(--font-display); font-weight:800; line-height:0.95; letter-spacing:0.01em;}
p{margin:0;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit; font-size:1rem;}
:focus-visible{outline:2px solid var(--copper); outline-offset:2px;}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding:0 28px;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--copper);
  margin:0 0 14px;
}
.eyebrow.light{color:var(--ember);}

.section{padding:96px 0;}
.section-head{max-width:640px; margin-bottom:56px;}
.section-title{
  font-size:clamp(2.1rem, 4vw, 3rem);
  text-transform:uppercase;
  margin-bottom:18px;
}
.section-title.light{color:var(--paper);}
.section-desc{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:52ch;
}
.section-desc + .section-desc{margin-top:14px;}
.section-desc.light{color:var(--paper-ink-soft);}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius);
  font-weight:600;
  font-size:0.95rem;
  border:1.5px solid transparent;
  transition:transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{
  background:var(--brand-gradient);
  background-size:160% 160%;
  background-position:0% 50%;
  color:var(--paper);
  transition:transform 0.18s ease, background-position 0.4s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-primary:hover{background-position:100% 50%;}
.btn-ghost{
  background:transparent;
  border-color:var(--ink);
  color:var(--ink);
}
.btn-ghost:hover{border-color:var(--copper); color:var(--copper);}
.btn-large{padding:18px 36px; font-size:1.05rem;}
.btn-block{width:100%;}
.btn-header{padding:10px 20px; font-size:0.85rem;}

/* ================= SCROLL THERMOMETER (signature — unchanged) ================= */
.thermo{
  position:fixed;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:60;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  pointer-events:none;
}
.thermo-track{
  width:9px;
  height:240px;
  border-radius:5px;
  background:var(--brand-gradient-v-rev);
  border:1px solid rgba(20,24,31,0.15);
  position:relative;
  overflow:hidden;
}
.thermo-fill{
  position:absolute;
  top:0; left:0; right:0;
  height:100%;
  background:var(--paper);
  transition:height 0.08s linear;
}
.thermo-bulb{
  width:17px; height:17px; border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 3px var(--paper), 0 0 0 4px rgba(20,24,31,0.15);
  margin-top:-2px;
  transition:background 0.08s linear;
}
.thermo-readout{
  font-family:var(--font-mono);
  font-size:0.72rem;
  font-weight:600;
  color:var(--ink-soft);
  writing-mode:vertical-rl;
  letter-spacing:0.05em;
}
@media (max-width:1000px){ .thermo{display:none;} }

.thermo-mobile{
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:65;
  align-items:center;
  gap:0;
  pointer-events:none;
  background:var(--paper);
  border-top:1px solid var(--steel-line);
  padding:8px 14px 10px;
}
.thermo-mobile-track{
  flex:1;
  height:7px;
  border-radius:4px;
  background:var(--brand-gradient);
  position:relative;
  overflow:hidden;
}
.thermo-mobile-fill{
  position:absolute;
  top:0; right:0; bottom:0;
  width:100%;
  background:var(--paper-dim);
  transition:width 0.08s linear;
}
.thermo-mobile-readout{
  font-family:var(--font-mono);
  font-size:0.7rem;
  font-weight:600;
  color:var(--ink-soft);
  margin-left:12px;
  min-width:38px;
  text-align:right;
}
@media (max-width:1000px){
  .thermo-mobile{display:flex;}
  body{padding-bottom: calc(var(--mobile-bar-h) + var(--mobile-actions-h));}
}

/* ================= MOBILE STICKY ACTION BAR ================= */
.mobile-actions{
  display:none;
  position:fixed;
  left:0; right:0;
  bottom:var(--mobile-bar-h);
  z-index:64;
  background:var(--charcoal);
  border-top:1px solid rgba(255,255,255,0.08);
}
@media (max-width:1000px){
  .mobile-actions{display:grid; grid-template-columns:1fr 1fr 1.2fr;}
}
.mobile-action{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  padding:9px 4px;
  color:var(--paper-ink-soft);
  font-family:var(--font-mono);
  font-size:0.66rem;
  letter-spacing:0.03em;
  border-right:1px solid rgba(255,255,255,0.08);
}
.mobile-action svg{width:19px; height:19px;}
.mobile-action:last-child{border-right:none;}
.mobile-action-primary{
  background:var(--brand-gradient);
  color:var(--paper);
}

/* ================= HEADER ================= */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(243,241,236,0.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--steel-line);
  transition:padding 0.2s ease;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 28px;
}
.brand{display:flex; align-items:center; gap:12px;}
.brand-mark{width:100px; height:35px; flex-shrink:0;}
.brand-mark img{width:100%; height:100%; object-fit:contain;}
.brand-word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:1.15rem;
  letter-spacing:0.02em;
  line-height:1;
  display:flex; flex-direction:column;
}
.brand-word em{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:0.58rem;
  letter-spacing:0.16em;
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  margin-top:4px;
}
.main-nav{display:flex; gap:32px;}
.main-nav a{
  font-size:0.92rem; font-weight:500; color:var(--ink-soft);
  position:relative; padding:4px 0;
  transition:color 0.15s ease;
  white-space:nowrap;
}
.main-nav a:hover{color:var(--copper);}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--copper); transition:width 0.2s ease;
}
.main-nav a:hover::after{width:100%;}

.header-actions{display:flex; align-items:center; gap:14px;}
.phone-pill{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-mono);
  font-size:0.85rem;
  color:var(--ink);
  border:1.5px solid var(--ink);
  border-radius:999px;
  padding:8px 16px;
  transition:border-color 0.15s ease, color 0.15s ease;
  white-space:nowrap;
}
.phone-pill:hover{border-color:var(--copper); color:var(--copper);}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px; height:36px;
  background:none; border:none;
  flex-shrink:0;
}
.nav-toggle span{
  display:block; width:100%; height:2px; background:var(--ink);
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Tablet / medium screens: the inline nav list starts crowding the header
   (logo + 6 links + phone pill + CTA all fighting for space) well before
   true laptop widths, so the hamburger kicks in earlier here — laptop/desktop
   (>1180px) keeps the full inline nav untouched. */
@media (max-width:1180px){
  .main-nav{
    position:fixed; top:69px; left:0; right:0;
    background:var(--paper);
    border-bottom:1px solid var(--steel-line);
    flex-direction:column; gap:0;
    max-height:0; overflow:hidden;
    transition:max-height 0.3s ease;
  }
  .main-nav.open{max-height:460px;}
  .main-nav a{padding:16px 28px; border-top:1px solid var(--steel-line); width:100%;}
  .phone-pill, .btn-header{display:none;}
  .nav-toggle{display:flex;}
}

/* ================= HERO ================= */
.hero{
  position:relative;
  padding:72px 0 40px;
  overflow:hidden;
}
.hero-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
}
.hero-title{
  font-size:clamp(2.2rem, 4.6vw, 3.4rem);
  text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:18px;
}
.hero-words{
  display:flex; flex-wrap:wrap; gap:0 16px;
  margin-bottom:20px;
}
.hw{
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(2.4rem, 5.4vw, 4rem);
  text-transform:uppercase;
  line-height:0.98;
  color:var(--ink);
}
.hw-blue{color:var(--blue);}
.hw-red{color:var(--red);}
.hw-outline{
  -webkit-text-stroke:1.5px var(--ink);
  color:transparent;
}
.hero-sub{
  margin:26px 0 10px;
  font-size:1.1rem;
  color:var(--ink-soft);
  max-width:46ch;
}
.hero-kicker{
  font-family:var(--font-mono);
  font-size:0.8rem;
  letter-spacing:0.08em;
  color:var(--ink-soft);
  margin-bottom:30px;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.hero-trust{
  display:flex; gap:36px;
  margin-top:52px;
  padding-top:28px;
  border-top:1px solid var(--steel-line);
}
.hero-trust .num, .about-stats .num{
  display:block;
  font-family:var(--font-mono);
  font-size:1.6rem;
  font-weight:600;
  color:var(--copper);
}
.hero-trust .lbl, .about-stats .lbl{
  display:block;
  font-size:0.8rem;
  color:var(--ink-soft);
  margin-top:2px;
}

/* gauge */
.hero-gauge{position:relative; display:flex; align-items:center; justify-content:center;}
.gauge-svg{width:min(100%, 360px);}
.gauge-ring-bg{fill:none; stroke:var(--paper-dim); stroke-width:14;}
.gauge-ring-fill{
  fill:none; stroke:url(#gaugeGradient); stroke-width:14; stroke-linecap:round;
  stroke-dasharray:880; stroke-dashoffset:880;
  transform:rotate(-220deg); transform-origin:160px 160px;
  transition:stroke-dashoffset 1.4s cubic-bezier(.16,.84,.44,1);
}
.gauge-needle{
  stroke:var(--ink); stroke-width:3; stroke-linecap:round;
  transform-origin:160px 160px;
  transform:rotate(-140deg);
  transition:transform 1.4s cubic-bezier(.16,.84,.44,1);
}
.gauge-hub{fill:var(--ink);}
.gauge-tick{stroke:var(--paper-ink-soft); stroke-width:2;}
.gauge-readout{
  position:absolute; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.gauge-value{
  font-family:var(--font-mono); font-weight:600;
  font-size:2.6rem; color:var(--ink);
}
.gauge-unit{
  font-family:var(--font-mono); font-size:1.2rem; color:var(--ink-soft);
}
.gauge-label{
  font-family:var(--font-mono); font-size:0.62rem; letter-spacing:0.12em;
  color:var(--ink-soft); margin-top:6px;
}

.scroll-cue{
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.1em;
  color:var(--ink-soft);
  margin:56px auto 0;
  width:fit-content;
}
.scroll-cue span{
  width:1px; height:26px; background:var(--copper);
  animation:scrollcue 1.8s ease-in-out infinite;
}
@keyframes scrollcue{
  0%,100%{transform:scaleY(1); opacity:1;}
  50%{transform:scaleY(0.4); opacity:0.4;}
}

@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr; text-align:left;}
  .hero-gauge{order:-1; margin-bottom:12px;}
  .gauge-svg{width:240px;}
  .hero-trust{gap:24px; flex-wrap:wrap;}
}

/* ================= INTRO BAND ================= */
.intro-band{padding:64px 0 96px;}
.intro-inner{max-width:760px;}
.intro-title{
  font-size:clamp(1.9rem, 4vw, 2.8rem);
  text-transform:uppercase;
  margin-bottom:22px;
}
.ink-copper{
  background:var(--brand-gradient-v);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.intro-desc{font-size:1.1rem; color:var(--ink-soft); max-width:64ch;}

/* ================= SERVICES ================= */
.svc-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1px;
  background:var(--steel-line);
  border:1px solid var(--steel-line);
}
.svc-card{
  background:var(--paper);
  padding:32px 28px;
  display:flex; flex-direction:column;
  transition:background 0.2s ease;
}
.svc-card:hover{background:var(--paper-dim);}
.svc-head{display:flex; align-items:center; gap:14px; margin-bottom:20px;}
.service-icon{width:34px; height:34px; color:var(--copper); flex-shrink:0;}
.svc-head h3{font-size:1.25rem; text-transform:uppercase; letter-spacing:0.01em;}
.svc-items{margin-bottom:22px; flex:1;}
.svc-items li{
  font-size:0.9rem; color:var(--ink-soft);
  padding:6px 0 6px 16px;
  border-top:1px solid var(--steel-line);
  position:relative;
}
.svc-items li:first-child{border-top:none;}
.svc-items li::before{
  content:""; position:absolute; left:0; top:14px;
  width:6px; height:1.5px; background:var(--copper);
}
.svc-link{
  font-family:var(--font-mono); font-size:0.8rem; font-weight:600;
  color:var(--patina); letter-spacing:0.02em;
  align-self:flex-start;
}
.svc-link:hover{color:var(--copper);}

@media (max-width:900px){ .svc-list{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .svc-list{grid-template-columns:1fr;} }

/* ================= PRECISION BAND (72°C) ================= */
.precision-band{
  background:var(--charcoal);
  padding:72px 0;
}
.precision-inner{
  display:flex; align-items:center; gap:52px; flex-wrap:wrap;
}
.precision-figure{
  font-family:var(--font-mono);
  font-weight:600;
  font-size:clamp(3.4rem, 8vw, 6rem);
  color:transparent;
  background:var(--brand-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  line-height:1;
  flex-shrink:0;
}
.precision-figure span{font-size:0.4em;}
.precision-copy{max-width:52ch;}
.precision-copy h2{
  color:var(--paper);
  font-size:clamp(1.6rem, 3vw, 2.2rem);
  text-transform:uppercase;
  margin-bottom:14px;
}
.precision-copy p{color:var(--paper-ink-soft); font-size:1rem;}

/* ================= OBJECT TYPES ================= */
.obj-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:24px;
}
.obj-card{
  padding:28px 24px;
  border:1px solid var(--steel-line);
  border-radius:var(--radius);
  background:var(--paper-dim);
}
.obj-card h3{font-size:1.1rem; text-transform:uppercase; margin-bottom:10px;}
.obj-card p{font-size:0.9rem; color:var(--ink-soft);}
@media (max-width:900px){ .obj-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .obj-grid{grid-template-columns:1fr;} }

/* ================= PROCESS (dark, pipeline) ================= */
.process{
  background:var(--charcoal);
  padding:110px 0;
}
.pipeline{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:24px;
}
.pipeline-6{grid-template-columns:repeat(6, 1fr);}
.pipeline-line{
  position:absolute;
  top:14px; left:0; width:100%; height:40px;
  z-index:0;
}
.pipeline-line path{
  fill:none;
  stroke:url(#pipelineGradient);
  stroke-width:2.5;
  stroke-dasharray:8 8;
  stroke-dashoffset:1000;
  transition:stroke-dashoffset 1.8s ease;
}
.pipeline-line.flow path{stroke-dashoffset:0;}

.pipe-step{
  position:relative; z-index:1;
  opacity:0; transform:translateY(18px);
  transition:opacity 0.6s ease, transform 0.6s ease;
}
.pipe-step.in-view{opacity:1; transform:translateY(0);}
.pipe-node{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--charcoal);
  border:2px solid var(--patina);
  color:var(--ember);
  font-family:var(--font-mono); font-size:0.72rem; font-weight:600;
  margin-bottom:20px;
}
.pipe-step h3{
  color:var(--paper); font-size:1.05rem; text-transform:uppercase; margin-bottom:10px;
}
.pipe-step p{color:var(--paper-ink-soft); font-size:0.88rem;}

@media (max-width:900px){
  .pipeline, .pipeline-6{grid-template-columns:1fr; gap:36px;}
  .pipeline-line{
    top:0; left:14px; width:2px; height:100%;
  }
  .pipeline-line path{d:path("M20,0 V1000");}
}

/* ================= WHY US ================= */
.why-inner{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:60px;
  align-items:start;
}
.why-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:36px;
}
.why-item svg{width:30px; height:30px; color:var(--patina); margin-bottom:16px;}
.why-item h3{font-size:1.05rem; text-transform:uppercase; margin-bottom:8px;}
.why-item p{color:var(--ink-soft); font-size:0.92rem;}

@media (max-width:900px){
  .why-inner{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr 1fr; gap:28px;}
}
@media (max-width:560px){
  .why-grid{grid-template-columns:1fr;}
}

/* ================= PROJECTS ================= */
.project-filters{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:36px;
}
.filter-btn{
  font-family:var(--font-mono);
  font-size:0.78rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  padding:9px 18px;
  border-radius:999px;
  border:1.5px solid var(--steel-line);
  background:transparent;
  color:var(--ink-soft);
  transition:border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.filter-btn:hover{border-color:var(--copper); color:var(--copper);}
.filter-btn.active{
  background:var(--ink);
  border-color:var(--ink);
  color:var(--paper);
}

.project-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.project-card{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--steel-line);
  background:var(--paper);
  transition:transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.project-card.is-hidden{display:none;}
/* extra rows (2nd+3rd row) are collapsed until "Shiko Të Gjitha" is clicked */
.project-card.is-collapsed{display:none;}
.project-card:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(28,32,35,0.12);}
.project-media{
  height:170px;
  display:flex; align-items:flex-end; justify-content:flex-start;
  padding:16px;
  background-color: var(--charcoal-2);
  position:relative;
}
.project-media span{
  font-family:var(--font-mono); font-size:0.85rem; font-weight:600;
  color:rgba(255,255,255,0.85);
  position:relative;
  z-index:1;
}
.pc-1 .project-media{background-image: url('img/sistem_industrial_foto_3.jpg'); background-position: center 70%; background-repeat: no-repeat; background-size: cover;}
.pc-2 .project-media{background-image: url('img/klimatizim_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-3 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-4 .project-media{background-image: url('img/sistem_qendror_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-5 .project-media{background-image: url('img/fshesa_qendrore_foto_1.jpg'); background-position: center 45%; background-repeat: no-repeat; background-size: cover;}
.pc-6 .project-media{background-image: url('img/klimatizim_foto_5.jpg'); background-position: center 60%; background-repeat: no-repeat; background-size: cover;}
.pc-7 .project-media{background-image: url('img/ventillim_foto_1.jpg'); background-position: center 10%; background-repeat: no-repeat; background-size: cover;}
.pc-8 .project-media{background-image: url('img/ujesjelles_foto_2.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-9 .project-media{background-image: url('img/sistem_industrial_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-10 .project-media{background-image: url('img/klimatizim_foto_2.jpg'); background-position: center 55%; background-repeat: no-repeat; background-size: cover;}
.pc-11 .project-media{background-image: url('img/sistem_qendror_foto_2.jpg'); background-position: top 100%; background-repeat: no-repeat; background-size: cover;}
.pc-12 .project-media{background-image: url('img/klimatizim_foto_3.jpg'); background-position: center 55%; background-repeat: no-repeat; background-size: cover;}
.pc-13 .project-media{background-image: url('img/ventlillim_foto_2.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-14 .project-media{background-image: url('img/sistem_industrial_foto_2.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-15 .project-media{background-image: url('img/sanitari_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-16 .project-media{background-image: url('img/radiator_foto_1.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-17 .project-media{background-image: url('img/klimatizim_foto_4.jpg'); background-position: center 20%; background-repeat: no-repeat; background-size: cover;}
.pc-18 .project-media{background-image: url('img/sistem_qendror_foto_3.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-19 .project-media{background-image: url('img/ujesjelles_foto_1.jpg'); background-position: center 90%; background-repeat: no-repeat; background-size: cover;}
.pc-20 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_4.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-21 .project-media{background-image: url('img/klimatizim_foto_7.jpg'); background-position: center 20%; background-repeat: no-repeat; background-size: cover;}
.pc-22 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_5.jpg'); background-position: center 100%; background-repeat: no-repeat; background-size: cover;}
.pc-23 .project-media{background-image: url('img/klimatizim_foto_6.jpg'); background-position: center 35%; background-repeat: no-repeat; background-size: cover;}
.pc-24 .project-media{background-image: url('img/sistem_qendror_foto_4.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-25 .project-media{background-image: url('img/sanitari_foto_2.jpg'); background-position: center bottom; background-repeat: no-repeat; background-size: cover;}
.pc-26 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_3.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-27 .project-media{background-image: url('img/klimatizim_foto_8.jpg'); background-position: top 60%; background-repeat: no-repeat; background-size: cover;}
.pc-28 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_2.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-29 .project-media{background-image: url('img/sistem_qendror_foto_5.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-30 .project-media{background-image: url('img/ngrohje_ne_dysheme_foto_6.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}
.pc-31 .project-media{background-image: url('img/sanitari_foto_3.jpg'); background-position: center 80%; background-repeat: no-repeat; background-size: cover;}
.pc-32 .project-media{background-image: url('img/sistem_qendror_foto_6.jpg'); background-position: center; background-repeat: no-repeat; background-size: cover;}


/* pc-extra (rows 07-12) intentionally have no background rules here —
   they now render identically to the styled cards above (plain --charcoal-2
   background) until real photos are added via .pc-7, .pc-8, etc. */
.project-info{padding:20px;}
.project-info p{font-size:0.85rem; color:var(--ink-soft); font-family:var(--font-mono);}
.project-empty{
  font-family:var(--font-mono); font-size:0.9rem; color:var(--ink-soft);
  padding:40px 0; text-align:center;
}
.projects-more{margin-top:44px; text-align:center;}

@media (max-width:900px){ .project-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:600px){ .project-grid{grid-template-columns:1fr;} }

/* ================= BRANDS ================= */
.brand-strip{
  display:flex; flex-wrap:wrap;
  gap:1px;
  background:var(--steel-line);
  border:1px solid var(--steel-line);
}
.brand-strip li{
  flex:1 1 160px;
  background:var(--paper);
  padding:26px 20px;
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft);
  transition:color 0.15s ease, background 0.15s ease;
}
.brand-strip li svg{
  height:26px;
  width:auto;
  color:inherit;
  fill:currentColor;
}
.brand-strip li:hover{color:var(--copper); background:var(--paper-dim);}

/* ================= ABOUT ================= */
.about-inner{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:52px;
  align-items:center;
}
.about-line{
  margin-top:22px;
  font-family:var(--font-mono);
  font-size:0.95rem;
  letter-spacing:0.04em;
  color:var(--copper);
}
.about-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
  padding:32px;
  background:var(--paper-dim);
  border:1px solid var(--steel-line);
  border-radius:var(--radius);
}
@media (max-width:900px){
  .about-inner{grid-template-columns:1fr;}
}

/* ================= CTA BANNER ================= */
.cta-banner{
  background:var(--copper);
  padding:70px 0;
}
.cta-inner{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px;
}
.cta-inner h2{
  color:var(--paper); font-size:clamp(1.6rem, 3.4vw, 2.4rem); text-transform:uppercase;
}
.cta-sub{color:rgba(243,241,236,0.85); margin-top:12px; max-width:44ch;}
.cta-buttons{display:flex; gap:14px; flex-wrap:wrap;}
.cta-banner .btn-primary{background:var(--charcoal);}
.cta-banner .btn-primary:hover{background:#000;}
.cta-banner .btn-wa{border-color:var(--paper); color:var(--paper);}
.cta-banner .btn-wa:hover{background:var(--paper); color:var(--copper); border-color:var(--paper);}

/* ================= CONTACT ================= */
.contact-inner{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:60px;
}
.contact-list{margin-top:32px; display:flex; flex-direction:column; gap:18px;}
.contact-list li{display:flex; align-items:center; gap:14px; font-size:0.95rem;}
.contact-list svg{width:20px; height:20px; color:var(--copper); flex-shrink:0;}
.contact-list a:hover{color:var(--copper);}

.contact-form{
  background:var(--paper-dim);
  border:1px solid var(--steel-line);
  border-radius:var(--radius);
  padding:32px;
  display:flex; flex-direction:column; gap:18px;
}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field label{
  font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.06em;
  color:var(--ink-soft); text-transform:uppercase;
}
.field input, .field select, .field textarea{
  padding:12px 14px;
  border:1.5px solid var(--steel-line);
  border-radius:var(--radius);
  background:var(--paper);
  color:var(--ink);
  outline:none;
  transition:border-color 0.15s ease;
  resize:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--copper);
}
.form-status{
  font-family:var(--font-mono); font-size:0.85rem; min-height:1.2em;
  color:var(--patina);
}
.form-status.error{color:#b03a2e;}

@media (max-width:900px){
  .contact-inner{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr;}
  .contact-form{padding:24px;}
}

/* ================= FOOTER ================= */
.site-footer{
  background:var(--charcoal);
  color:var(--paper-ink-soft);
  padding-top:60px;
}
.footer-inner{
  display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px;
  padding-bottom:40px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-brand .brand-mark{filter:brightness(1.1);}
.footer-brand p{margin-top:14px; max-width:32ch; font-size:0.9rem;}
.footer-line{color:var(--ember); font-family:var(--font-mono); font-size:0.82rem;}
.footer-nav{display:flex; gap:26px; flex-wrap:wrap;}
.footer-nav a{font-size:0.9rem;}
.footer-nav a:hover{color:var(--ember);}
.footer-social{display:flex; gap:14px;}
.footer-social a{
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{width:16px; height:16px;}
.footer-social a:hover{border-color:var(--ember); color:var(--ember);}
.footer-bottom{
  padding:22px 28px;
  font-size:0.8rem;
  font-family:var(--font-mono);
}

@media (max-width:600px){
  .section{padding:64px 0;}
  .footer-inner{flex-direction:column;}
}