/* ============================================================
   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 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); }

/* ---------- 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(300px, 100%), 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 14px;
}

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

.work-item.tall { grid-row: span 2; }

.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); }

@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; }
}

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

.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 */
.rental { background: #0c0c0c; color: #fff; }

.rental .section-head .num { color: rgba(255,255,255,.5); }
.rental .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 { border-color: #fff; color: #fff; }
.rental .btn:hover, .rental .btn:focus-visible { background: #fff; color: #0c0c0c; }

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

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

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

.clients-grid span {
  font-family: var(--font-display);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 500;
  padding: clamp(18px, 2.6vw, 32px) clamp(14px, 2vw, 26px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  color: var(--gray);
  transition: color .2s ease, background .2s ease;
}

.clients-grid span:hover { color: var(--ink); background: var(--paper-2); }

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

/* ---------- 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 ---------- */

@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 { background: none; color: #0c0c0c; }
  .rental .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; }