/* ============================================================
   VTF Studio — redesign
   Black / white system built around the pixel-glitch logomark.
   ============================================================ */

:root {
  --ink: #0c0c0c;
  --paper: #ffffff;
  --paper-2: #f4f4f2;
  --gray: #6a6a6a;
  --line: #e4e4e1;
  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(20px, 4vw, 48px);
  --section: clamp(72px, 10vw, 140px);
  color-scheme: light;
}

/* Dark theme: --ink/--paper and friends are the page's two base colors
   everywhere except the handful of sections deliberately built as fixed
   dark accent blocks (rental, footer, the B2B pricing card, image-overlay
   badges) — those use literal hex, not these variables, so they stay put
   regardless of theme. Flipping the variables here is what makes the rest
   of the site (text, borders, buttons, card backgrounds) theme-aware for
   free, without touching every individual rule. */
html[data-theme="dark"] {
  --ink: #f2f2f0;
  --paper: #0e0e0e;
  --paper-2: #1a1a1a;
  --gray: #9a9a9a;
  --line: #2c2c2c;
  color-scheme: dark;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
  max-width: 1360px;
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- typography ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.section-head {
  display: flex;
  align-items: baseline;
  gap: 20px;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.section-head .num {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  color: var(--gray);
  letter-spacing: 0.14em;
}

.section-head h2 {
  font-size: clamp(30px, 4.6vw, 56px);
  text-transform: uppercase;
}

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--ink); }
.muted { color: var(--gray); }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  /* light wash so nav links stay readable over dark areas of the hero photo */
  background: linear-gradient(to bottom, rgba(255,255,255,.82), rgba(255,255,255,0));
  transition: background .25s ease, box-shadow .25s ease;
}

/* no backdrop-filter here: it would create a containing block that
   breaks the fixed-position mobile nav overlay */
.site-header.scrolled {
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 1px 0 var(--line);
}

html[data-theme="dark"] .site-header {
  background: linear-gradient(to bottom, rgba(14,14,14,.82), rgba(14,14,14,0));
}

html[data-theme="dark"] .site-header.scrolled {
  background: rgba(14, 14, 14, .97);
}

.site-header .bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand img { height: 34px; width: auto; }

.site-nav { display: flex; gap: 34px; }

.site-nav a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  position: relative;
  padding: 6px 0;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--ink);
  transition: width .22s ease;
}

.site-nav a:hover::after, .site-nav a:focus-visible::after { width: 100%; }

/* ---------- language switch ---------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 14px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.lang-switch a,
.lang-switch span {
  color: var(--gray);
  transition: color .2s ease;
}

.lang-switch a:hover, .lang-switch a:focus-visible { color: var(--ink); }
.lang-switch .active { color: var(--ink); border-bottom: 2px solid var(--ink); padding-bottom: 1px; }

@media (max-width: 860px) {
  .lang-switch { margin: 14px 0 0; }
}

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  width: 44px; height: 44px;
  position: relative;
  z-index: 120;
}

.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  background: var(--ink);
  margin: 5px auto;
  transition: transform .25s ease, opacity .2s ease;
}

.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed;
    inset: 0;
    background: var(--paper);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    overflow-y: auto;
    padding: 24px 0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
    z-index: 110;
  }
  .nav-open .site-nav {
    transform: translateY(0);
    visibility: visible;
    transition: transform .3s ease;
  }
  .site-nav a { font-size: 20px; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../img/brand/hero-2400.jpg") center / cover no-repeat;
  filter: grayscale(1) contrast(1.04);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* strong enough that the logomark baked into the photo reads as texture,
     never competing with the headline or CTAs */
  background: linear-gradient(to bottom, rgba(255,255,255,.38) 0%, rgba(255,255,255,.60) 50%, rgba(255,255,255,.93) 100%);
  z-index: 1;
}

html[data-theme="dark"] .hero::before {
  background: linear-gradient(to bottom, rgba(14,14,14,.38) 0%, rgba(14,14,14,.60) 50%, rgba(14,14,14,.93) 100%);
}

.hero .container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: clamp(56px, 9vh, 110px);
}

.hero-kicker {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
}
.hero-kicker strong { font-weight: 700; }

.hero h1 {
  font-size: clamp(44px, 8.5vw, 118px);
  text-transform: uppercase;
  margin-bottom: 22px;
}

.hero h1 .dim { color: var(--gray); }

.hero p {
  max-width: 560px;
  font-size: clamp(16px, 1.7vw, 20px);
  margin-bottom: 34px;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 16px 28px;
  border: 1px solid var(--ink);
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
}

.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover, .btn-solid:focus-visible { background: transparent; color: var(--ink); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--ink); color: var(--paper); }

/* ---------- sections ---------- */

section { padding-top: var(--section); padding-bottom: var(--section); }

/* Alternating section backgrounds so each section reads as a distinct band
   down the page. Only the two neutral tones already in the palette
   (--paper/--paper-2) are used, so this stays theme-aware for free and
   doesn't introduce color outside the site's black/white system. ID
   selectors here deliberately win over the older .about/.contact class
   rules so the alternation stays strictly A/B all the way down. Rental
   keeps its own fixed-dark background regardless of this alternation. */
#radovi   { background: var(--paper); }
#case-study { background: var(--paper-2); }
#o-nama   { background: var(--paper); }
#tim      { background: var(--paper-2); }
#usluge   { background: var(--paper); }
#klijenti { background: var(--paper-2); }
#print    { background: var(--paper); }

/* ---------- portfolio ---------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin-bottom: clamp(28px, 4vw, 48px);
}

.filters button {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: none;
  border: 0;
  padding: 8px 0;
  color: var(--gray);
  cursor: pointer;
  position: relative;
  transition: color .2s ease;
}

.filters button::after {
  content: "";
  position: absolute;
  left: 0; bottom: 2px;
  width: 0; height: 2px;
  background: var(--ink);
  transition: width .22s ease;
}

.filters button:hover { color: var(--ink); }
.filters button.active { color: var(--ink); }
.filters button.active::after { width: 100%; }

.work-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 14px;
}

.work-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 0;
  padding: 0;
  background: var(--paper-2);
  text-align: left;
  aspect-ratio: 4 / 3;
}

.work-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.work-item:hover img, .work-item:focus-visible img { transform: scale(1.045); }

.work-item .tag {
  position: absolute;
  left: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0c0c0c;
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 9px 14px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s ease, transform .25s ease;
}

.work-item:hover .tag, .work-item:focus-visible .tag { opacity: 1; transform: translateY(0); }

.work-item .play {
  position: absolute;
  top: 50%; left: 50%;
  width: 58px; height: 58px;
  transform: translate(-50%, -50%);
  background: rgba(12,12,12,.82);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background .2s ease;
}

.work-item .play::before {
  content: "";
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #fff;
  margin-left: 4px;
}

.work-item:hover .play { background: var(--ink); }

.work-item.hidden,
.work-item.page-hidden { display: none; }

.grid-load-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.grid-load-more.done { display: none; }

/* ---------- about ---------- */

.about { background: var(--paper-2); }

.about-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(36px, 6vw, 90px);
  align-items: start;
}

.about-grid .col p + p { margin-top: 18px; }

.vision-box {
  border-left: 3px solid var(--ink);
  padding: 6px 0 6px 26px;
}

.vision-box h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}

@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
}

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
}

.team-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  border: 1px solid var(--line);
  padding: clamp(22px, 2.5vw, 32px);
}

.team-photo {
  width: 140px; height: 140px;
  overflow: hidden;
  background: var(--paper-2);
  flex-shrink: 0;
}

.team-photo img { width: 100%; height: 100%; object-fit: cover; }

.team-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0c0c0c;
}

.team-photo-placeholder span {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}

.team-body h3 {
  font-size: clamp(19px, 2vw, 23px);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.team-body .role {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.team-body .bio-short,
.team-body .bio-long p {
  font-size: 15px;
  line-height: 1.6;
}

.bio-long {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}

.bio-long > p { overflow: hidden; margin-top: 12px; }

.bio-long[hidden] { display: grid; }

.team-card.open .bio-long { grid-template-rows: 1fr; }

.read-more {
  margin-top: 14px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  cursor: pointer;
}

.read-more:hover { color: var(--gray); border-color: var(--gray); }

.team-video { margin-top: clamp(32px,4vw,48px); max-width: 480px; }
.team-video-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--gray); margin-bottom: 8px; }

@media (max-width: 760px) {
  .team-grid { grid-template-columns: 1fr; }
  .team-card { grid-template-columns: 84px 1fr; }
  .team-photo { width: 84px; height: 84px; }
  .team-photo-placeholder span { font-size: 22px; }
}

/* ---------- case study ---------- */

.case-card {
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--paper);
}

.case-card.hidden { display: none; }

.case-card + .case-card { margin-top: clamp(20px, 3vw, 32px); }

.video-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0c0c0c;
}

.video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.case-photo { aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper-2); }
.case-photo img { width: 100%; height: 100%; object-fit: cover; }

.case-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  aspect-ratio: 16 / 9;
  background: #fff;
}
.case-photos img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 14px;
}

.case-body { padding: clamp(24px, 3vw, 40px); }

.case-client {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}

.case-body h3 {
  font-size: clamp(20px, 2.2vw, 27px);
  margin-bottom: 14px;
}

.case-desc {
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 22px;
}

/* ---------- pricing ---------- */

.service-choice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.choice-card {
  display: block;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  overflow: hidden;
  transition: border-color .2s ease;
}
.choice-card:hover, .choice-card:focus-visible { border-color: var(--ink); }

.choice-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .45s ease;
}
.choice-card:hover img { transform: scale(1.03); }

.choice-body { padding: clamp(20px, 2.5vw, 32px); }

.choice-tag {
  display: block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 10px;
}

.choice-card h3 { font-size: clamp(19px, 2vw, 24px); margin-bottom: 10px; }
.choice-card p { font-size: 14px; color: var(--gray); line-height: 1.55; margin-bottom: 16px; }

.choice-cta {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
}

.pricing-groups {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.pricing-group {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px);
}

.pg-head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
}

.pg-head .num {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--gray);
  letter-spacing: 0.14em;
}

.pg-head h3 {
  font-size: clamp(17px, 1.8vw, 21px);
  text-transform: uppercase;
}

.pricing-list { list-style: none; display: grid; gap: 14px; }

.pricing-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.pricing-list li:last-child { border-bottom: 0; padding-bottom: 0; }

.pi-name .muted { display: block; font-size: 12.5px; margin-top: 2px; }

.pi-price {
  font-family: var(--font-display);
  font-weight: 600;
  white-space: nowrap;
}

/* fixed dark accent block — deliberately unaffected by the light/dark theme */
.pricing-group-b2b {
  grid-column: span 2;
  background: #0c0c0c;
  color: #fff;
  border-color: #0c0c0c;
}

.pricing-group-b2b .pg-head .num { color: rgba(255,255,255,.5); }
.pricing-group-b2b .muted { color: rgba(255,255,255,.72); }
.pricing-group-b2b .btn { border-color: #fff; color: #fff; margin-top: 8px; }
.pricing-group-b2b .btn:hover { background: #fff; color: #0c0c0c; }

@media (max-width: 860px) {
  .pricing-groups { grid-template-columns: 1fr; }
  .pricing-group-b2b { grid-column: span 1; }
}

/* ---------- services ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.service-card {
  border: 1px solid var(--line);
  padding: clamp(26px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}

.service-card:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.service-card:hover .muted { color: rgba(255,255,255,.72); }

.service-card .num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--gray);
}

.service-card:hover .num { color: rgba(255,255,255,.6); }

.service-card h3 {
  font-size: clamp(20px, 2vw, 26px);
  text-transform: uppercase;
}

@media (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; }
}

/* ---------- rental ---------- */

/* fixed dark accent block — deliberately unaffected by the light/dark theme.
   .production (the production-services section) shares this exact treatment
   — same idea as rental, so it reuses the same rules rather than duplicating
   them under a second selector prefix. */
.rental, .production { background: #0c0c0c; color: #fff; }

.rental .section-head .num, .production .section-head .num { color: rgba(255,255,255,.5); }
.rental .muted, .production .muted { color: rgba(255,255,255,.66); }

.rental-intro { max-width: 720px; margin-bottom: clamp(36px, 5vw, 60px); }

.rental-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 220px;
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 72px);
}

.rental-gallery figure { overflow: hidden; margin: 0; position: relative; }
.rental-gallery figure:nth-child(1) { grid-column: span 4; grid-row: span 2; }
.rental-gallery figure:nth-child(2) { grid-column: span 2; grid-row: span 2; }
.rental-gallery figure:nth-child(3) { grid-column: span 3; }
.rental-gallery figure:nth-child(4) { grid-column: span 3; }

.rental-gallery img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.rental-gallery figure:hover img { transform: scale(1.04); }

@media (max-width: 860px) {
  .rental-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .rental-gallery figure:nth-child(1),
  .rental-gallery figure:nth-child(2),
  .rental-gallery figure:nth-child(3),
  .rental-gallery figure:nth-child(4) { grid-column: span 2; grid-row: span 1; }
}

.specs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: clamp(40px, 6vw, 64px);
}

.spec {
  border: 1px solid rgba(255,255,255,.18);
  padding: 24px;
}

.spec .val {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 8px;
}

.spec .lbl {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,.66);
}

@media (max-width: 860px) {
  .specs-grid { grid-template-columns: 1fr 1fr; }
}

.equip-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-bottom: clamp(40px, 6vw, 64px);
}

.equip h3 {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.22);
}

.equip ul { list-style: none; }

.equip li {
  padding: 7px 0 7px 20px;
  position: relative;
  color: rgba(255,255,255,.84);
  font-size: 15px;
}

.equip li::before {
  content: "";
  position: absolute;
  left: 0; top: 15px;
  width: 7px; height: 7px;
  background: #fff;
}

@media (max-width: 860px) {
  .equip-grid { grid-template-columns: 1fr; }
}

.rental .btn, .production .btn { border-color: #fff; color: #fff; }
.rental .btn:hover, .rental .btn:focus-visible,
.production .btn:hover, .production .btn:focus-visible { background: #fff; color: #0c0c0c; }

.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.promo-card {
  border: 1px solid rgba(255,255,255,.25);
  padding: clamp(20px, 2.5vw, 32px);
}

.promo-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0c0c0c;
  background: #fff;
  padding: 4px 10px;
  margin-bottom: 14px;
}

.promo-card h3 { font-size: 20px; margin-bottom: 8px; }
.promo-desc { color: rgba(255,255,255,.7); font-size: 14px; line-height: 1.55; margin-bottom: 16px; }
.promo-price { font-family: var(--font-display); font-size: 28px; font-weight: 700; }

.production-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: clamp(32px, 4vw, 48px);
}

.production-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04);
}

@media (max-width: 700px) {
  .production-gallery { grid-template-columns: repeat(2, 1fr); }
}

.price-tables {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-bottom: 24px;
}

.price-table h3 {
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
  color: rgba(255,255,255,.9);
}

.price-table ul { list-style: none; }
.price-table li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
  font-size: 14px;
  line-height: 1.4;
}
.price-table li span:first-child { color: rgba(255,255,255,.75); }
.price-table li span:last-child { font-family: var(--font-display); font-weight: 600; white-space: nowrap; }

.rental-weekend-note, .surcharge-note {
  font-size: 13px;
  color: rgba(255,255,255,.6);
  margin-bottom: 20px;
}

/* ---------- booking modal ---------- */

.booking-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.booking-modal[hidden] { display: none; }

.booking-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,8,8,.7);
}

.booking-panel {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  width: min(560px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: clamp(24px, 3vw, 40px);
}

.booking-close {
  position: absolute;
  top: 16px; right: 16px;
  background: none;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  opacity: .6;
  transition: opacity .2s ease;
}
.booking-close:hover { opacity: 1; }

.booking-panel h3 { font-size: 22px; margin-bottom: 8px; padding-right: 30px; }
.booking-intro { font-size: 14px; margin-bottom: 20px; }

.booking-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.booking-date {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: 10px;
  background: var(--paper);
  color: var(--ink);
}

.booking-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.booking-row .field-input { margin-bottom: 10px; }
@media (max-width: 480px) {
  .booking-row { grid-template-columns: 1fr; }
}

.booking-weekend-flag {
  font-size: 13px;
  font-weight: 600;
  color: #b4590a;
  margin-bottom: 16px;
}

.booking-section { margin: 22px 0; }
.booking-section h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gray);
  margin-bottom: 12px;
}

.booking-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.45;
  padding: 8px 0;
  cursor: pointer;
}
.booking-option input { margin-top: 3px; flex-shrink: 0; }

.booking-hours {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0 4px 26px;
}
.booking-hours[hidden] { display: none; }
.booking-hours label { font-size: 13px; color: var(--gray); }
.booking-hours input {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}

.booking-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--line);
  margin-top: 20px;
  padding-top: 16px;
  font-size: 15px;
}
.booking-total strong { font-family: var(--font-display); font-size: 24px; }

.booking-note { font-size: 12px; margin: 10px 0 20px; }

#bookingSubmit { display: block; text-align: center; }

.field-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 14px;
  margin-bottom: 14px;
  background: var(--paper);
  color: var(--ink);
}
textarea.field-input { resize: vertical; min-height: 70px; }

.prod-fields { margin-top: 18px; }

.booking-total-breakdown {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.btd-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 4px 0;
  color: var(--gray);
}
.btd-row.btd-total {
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid var(--line);
}
.btd-row.btd-total span:last-child { font-family: var(--font-display); font-size: 22px; }

#prodSubmit { display: block; text-align: center; margin-top: 18px; }

/* ---------- clients ---------- */

.clients-note { max-width: 620px; margin-bottom: clamp(36px, 5vw, 56px); }

.clients-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.logo-cell {
  padding: clamp(16px, 2vw, 24px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  text-decoration: none;
  transition: background .2s ease;
}

.logo-cell img {
  max-width: 100%;
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .7;
  transition: filter .2s ease, opacity .2s ease;
}

.logo-cell:hover { background: var(--paper-2); }
.logo-cell:hover img { filter: grayscale(0%); opacity: 1; }

@media (max-width: 860px) {
  .clients-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .clients-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- print ---------- */

.print-carousel {
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
}

.print-track {
  display: flex;
  gap: 14px;
  width: max-content;
  animation: print-scroll 55s linear infinite;
}

.print-carousel:hover .print-track { animation-play-state: paused; }

.print-item {
  display: block;
  overflow: hidden;
  background: var(--paper-2);
  flex: 0 0 clamp(220px, 26vw, 340px);
  aspect-ratio: 3 / 2;
}

.print-item img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.print-item:hover img { transform: scale(1.045); }

@keyframes print-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- contact ---------- */

.contact { background: var(--paper-2); }

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: clamp(40px, 6vw, 100px);
  align-items: start;
}

.contact h2.big {
  font-size: clamp(36px, 5.6vw, 72px);
  text-transform: uppercase;
  margin-bottom: 24px;
}

.contact-list { list-style: none; display: grid; gap: 22px; }

.contact-list .lbl {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--gray);
  margin-bottom: 4px;
}

.contact-list .val {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.8vw, 22px);
  font-weight: 500;
}

.contact-list a:hover { text-decoration: underline; text-underline-offset: 4px; }

.socials { display: flex; gap: 18px; margin-top: 28px; }

.socials a {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 3px;
}

.socials a:hover { color: var(--gray); border-color: var(--gray); }

@media (max-width: 860px) {
  .contact-grid { grid-template-columns: 1fr; }
}

/* ---------- footer ---------- */

/* fixed dark bar — deliberately unaffected by the light/dark theme; also
   where the theme toggle itself lives, so it can't visually disappear */
.site-footer {
  background: #0c0c0c;
  color: rgba(255,255,255,.66);
  padding: 24px 0;
  font-size: 13px;
}

.site-footer .row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  justify-content: space-between;
}

.site-footer strong { color: #fff; font-weight: 600; }

/* theme toggle — lives in the (always-dark) footer, so it's styled with
   fixed light-on-dark colors rather than the flippable page variables */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 7px 14px 7px 8px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.theme-toggle:hover { border-color: #fff; color: #fff; }

.theme-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fff 50%, #111 50%);
  border: 1px solid rgba(255,255,255,.4);
  flex-shrink: 0;
}

.theme-toggle[aria-pressed="true"] { background: #fff; color: #0c0c0c; border-color: #fff; }

/* ---------- lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8,8,8,.96);
  display: none;
  align-items: center;
  justify-content: center;
}

.lightbox.open { display: flex; }

.lightbox .stage {
  max-width: min(1200px, 92vw);
  width: 100%;
  padding: 0 16px;
}

.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  object-fit: contain;
}

.lightbox .video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 80vh;
}

.lightbox .video-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

.lightbox .caption {
  color: rgba(255,255,255,.75);
  font-size: 14px;
  text-align: center;
  margin-top: 16px;
}

.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-family: var(--font-display);
  padding: 12px;
  opacity: .8;
  transition: opacity .2s ease;
}

.lightbox button:hover { opacity: 1; }

.lb-close { top: 20px; right: 24px; font-size: 34px; line-height: 1; }

.lb-prev, .lb-next {
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
}

.lb-prev { left: 12px; }
.lb-next { right: 12px; }

@media (max-width: 640px) {
  .lb-prev, .lb-next { top: auto; bottom: 16px; transform: none; }
  .lb-prev { left: 24px; }
  .lb-next { right: 24px; }
}

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .work-item img, .rental-gallery img { transition: none; }
  .print-track { animation: none; overflow-x: auto; }
}

/* ---------- print ---------- */

@media print {
  .reveal { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; background: none; }
  .lightbox, .nav-toggle { display: none !important; }
  .hero { min-height: auto; }
  .rental, .production { background: none; color: #0c0c0c; }
  .rental .muted, .production .muted, .equip li { color: #6a6a6a; }
}

/* ---------- a11y ---------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 18px;
}

.skip-link:focus { left: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.rental :focus-visible, .lightbox :focus-visible, .site-footer :focus-visible { outline-color: #fff; }