:root{
  --black:#171411;
  --coal:#221E1A;
  --paper:#F1EEE7;
  --red:#9E2620;
  --red-deep:#7E1B16;
  --yellow:#F0B41C;
  --bone:#E9E4D8;
  --ink:#262220;
  --display:'Rubik Distressed', 'Oswald', sans-serif;
  --label:'Oswald', sans-serif;
  --body:'Rubik', sans-serif;
  --marker:'Permanent Marker', cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  position:relative;
}
/* faint print-grain over everything */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{background:#171411 url('../img/pozadina.svg') repeat;background-size:620px;background-attachment:fixed}
body{max-width:1280px;margin:0 auto;box-shadow:0 0 50px rgba(0,0,0,.45)}
.badge-img{height:3.8rem;width:auto;display:block;position:absolute;right:1.4rem;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.badge-img{position:static;transform:none}.topbar{padding:.9rem 1.5rem}}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* ============ TOP BAR ============ */
.topbar{background:var(--black);color:var(--bone);display:flex;align-items:center;justify-content:flex-start;gap:1.5rem;padding:.9rem 5rem .9rem 1.4rem;flex-wrap:wrap;position:relative}
.logo{display:flex;align-items:center;gap:.5rem}
.logo-img{height:4.2rem;width:auto;display:block}
.bolt-img{height:3.9rem;width:auto;display:block}
.moto-img{height:3.4rem;width:auto;display:block}
.logo-mark{
  font-family:var(--marker);font-size:1.7rem;color:var(--bone);
  letter-spacing:.02em;white-space:nowrap;
}
.logo-year{
  display:flex;flex-direction:column;gap:.2rem;
  font-family:var(--label);font-weight:600;font-size:.65rem;
}
.logo-year span{background:var(--red);color:var(--bone);padding:.05rem .3rem;line-height:1.2}
.bolt{flex:0 0 auto}
.tagline{
  font-family:var(--display);font-size:1.05rem;line-height:1.15;
  text-transform:uppercase;letter-spacing:.04em;max-width:16ch;
}
.badge{margin-left:auto;flex:0 0 auto}

/* ============ NAV ============ */
.nav{
  background:var(--red);display:flex;flex-wrap:wrap;
  position:sticky;top:0;z-index:50;
  box-shadow:0 3px 0 rgba(0,0,0,.35);
}
.nav-links > a{
  font-family:var(--display);font-size:1rem;letter-spacing:.06em;
  color:var(--bone);padding:.8rem 1.4rem;text-transform:uppercase;
  border-right:1px solid var(--red-deep);
  transition:background .15s,color .15s;
}
.nav-links > a:hover{background:var(--red-deep)}

/* ============ HERO ============ */
.hero{padding:4rem 1.5rem 3.5rem;text-align:center}
.hero-art{max-width:980px;margin:0 auto}
.cta{
  display:inline-block;margin-top:2.5rem;
  background:var(--red);color:var(--bone);
  font-family:var(--display);font-size:clamp(1.6rem,4vw,2.4rem);
  padding:.7em 1.4em;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:7px 7px 0 var(--black);
  transition:transform .12s, box-shadow .12s;
}
.cta:hover{transform:translate(3px,3px);box-shadow:4px 4px 0 var(--black)}

/* ============ PHOTO STRIP ============ */
.ph{
  aspect-ratio:1/1;position:relative;overflow:hidden;background:var(--coal);
  display:flex;align-items:flex-end;justify-content:center;
}
.ph img{width:100%;height:100%;object-fit:cover}
.ph .ph-tag{
  position:absolute;inset:auto 0 0 0;text-align:center;
  font-family:var(--label);font-weight:600;font-size:.7rem;letter-spacing:.2em;
  color:var(--bone);background:rgba(0,0,0,.55);padding:.4rem;text-transform:uppercase;
}
.ph-empty{
  background:
    repeating-linear-gradient(45deg, var(--coal) 0 18px, #2E2925 18px 36px);
}
.ph-empty::before{
  content:"📷";font-size:2rem;position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;opacity:.5;
}

/* ============ ABOUT ============ */
.about{max-width:780px;margin:0 auto;padding:4.5rem 1.5rem 1rem}
h2{
  font-family:var(--display);font-size:clamp(1.8rem,4.5vw,2.6rem);
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:1rem;
  color:var(--black);
}
.about p{font-size:1.05rem}

/* ============ SERVICE CARDS ============ */
.cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;
  max-width:100%;margin:3.5rem auto 0;padding:0 1.5rem 4.5rem;
}
.card{display:flex;flex-direction:column;background:var(--black)}
.card .ph{aspect-ratio:1/1.05}
.card-body{
  padding:1.6rem 1.4rem 1.8rem;color:var(--bone);
  display:flex;flex-direction:column;flex:1;
}
.card-body h3{
  font-family:var(--display);font-size:1.5rem;letter-spacing:.05em;
  text-transform:uppercase;margin-bottom:.7rem;
}
.card-body p{font-size:.92rem;opacity:.92;flex:1}
.card-btn{
  display:inline-block;margin-top:1.4rem;align-self:flex-start;
  background:var(--yellow);color:var(--black);
  font-family:var(--display);font-size:.95rem;letter-spacing:.05em;
  padding:.65em 1.2em;text-transform:uppercase;
  box-shadow:4px 4px 0 rgba(0,0,0,.55);
  transition:transform .12s, box-shadow .12s;
}
.card-btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(0,0,0,.55)}

/* ============ BOOKING STRIP ============ */
.booking{
  background:var(--red);color:var(--bone);text-align:center;
  padding:3.5rem 1.5rem;
}
.booking h2{color:var(--bone)}
.booking p{max-width:52ch;margin:0 auto 1.8rem;font-size:1.05rem}
.booking .contact{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}
.booking .contact a{
  background:var(--black);color:var(--bone);
  font-family:var(--label);font-weight:600;letter-spacing:.08em;
  padding:.8em 1.6em;text-transform:uppercase;font-size:.85rem;
  box-shadow:5px 5px 0 var(--red-deep);
  transition:transform .12s, box-shadow .12s;
}
.booking .contact a:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--red-deep)}

/* ============ PARTNERS ============ */
.partners{background:var(--coal);padding:3.5rem 1.5rem 3rem;text-align:center}
.partners-row{
  display:flex;justify-content:center;align-items:center;
  gap:1.6rem 2.4rem;flex-wrap:wrap;
}
.partner-slot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:4.6rem;
  max-width:11rem;
  padding:0 .15rem;
}
.partner-slot--wide{max-width:14rem}
.partner-slot--oils-combo{
  height:5.2rem;
  max-width:12rem;
}
.partner-logo{
  display:block;
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  object-position:center;
}
.partners-row + .partners-row{margin-top:1.6rem}
.partners-note{
  margin-top:2.2rem;font-size:.75rem;color:#7E776C;
  font-family:var(--label);letter-spacing:.12em;text-transform:uppercase;
}
@media (max-width:700px){
  .partner-slot{height:3.6rem;max-width:8.5rem}
  .partner-slot--wide{max-width:11rem}
  .partner-slot--oils-combo{height:4.2rem;max-width:10rem}
  .partners-row{gap:1.1rem 1.4rem}
}

/* ============ FOOTER ============ */
footer{background:var(--black);text-align:center;padding:4rem 1rem 3rem}
.wordmark-img{width:min(520px,82%);height:auto;display:inline-block}
.foot-meta{
  margin-top:2rem;color:#8C8478;font-size:.8rem;
  font-family:var(--label);letter-spacing:.14em;text-transform:uppercase;
}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .cards{grid-template-columns:1fr;max-width:480px}
  .topbar{justify-content:center;text-align:center}
  .badge{margin-left:0}
  .nav{justify-content:center}
}