/*
Theme Name:  The Frame
Theme URI:   https://theframe.film
Author:      The Frame Studio
Description: A cinematic dark WordPress theme for Cinematographers and Visual Artists. Portfolio management, equipment rental, and contact pages included. Tutor LMS ready.
Version:     1.0.3
Requires at least: 6.0
Tested up to:      6.7
Requires PHP:      8.0
License:           GPL-2.0-or-later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       the-frame
Tags: dark, custom-logo, custom-menu, featured-images, full-width-template, translation-ready
*/

/* =============================================
   GLOBAL RESET
   ============================================= */
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html { scroll-behavior: smooth; }
body {
  background-color: #121317;
  color: #e3e2e7;
  font-family: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
h1, h2, h3 { font-family: 'Bodoni Moda', Georgia, serif; color: #e3e2e7; }
h4, h5, h6 { font-family: 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #e3e2e7; }
p   { color: #d4c5ab; }
a   { color: #e3e2e7; text-decoration: none; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; }
a:hover { color: #fabd00; }
img { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
::selection { background-color: #fabd00; color: #261a00; }

/* =============================================
   CONTAINER
   ============================================= */
.wrap {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 80px;
  padding-right: 80px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* =============================================
   SECTIONS
   ============================================= */
.section    { padding-top: 120px; padding-bottom: 120px; }
.section-sm { padding-top:  60px; padding-bottom:  60px; }

/* =============================================
   GLASS
   ============================================= */
.glass {
  background: rgba(30, 31, 35, 0.4);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 16px 40px;
  border: none;
  -webkit-transition: -webkit-filter 0.3s ease, -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
  transition: filter 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.btn:active { -webkit-transform: scale(0.97); transform: scale(0.97); }

.btn-gold {
  background-color: #fabd00;
  color: #261a00;
}
.btn-gold:hover {
  color: #261a00;
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
  -webkit-box-shadow: 0 0 28px rgba(250, 189, 0, 0.4);
  box-shadow: 0 0 28px rgba(250, 189, 0, 0.4);
}

.btn-ghost {
  background: transparent;
  color: #e3e2e7;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-ghost:hover {
  border-color: #fabd00;
  color: #fabd00;
}

/* =============================================
   TYPOGRAPHY HELPERS
   ============================================= */
.eyebrow {
  display: block;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #fabd00;
  margin-bottom: 16px;
}
.display {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #e3e2e7;
}
.display em { font-style: italic; color: #fabd00; }

.heading {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.17;
  font-weight: 600;
  color: #e3e2e7;
}
.heading em { font-style: italic; color: #fabd00; font-weight: 400; }

.subheading {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.25;
  font-weight: 500;
  color: #e3e2e7;
}
.lead  { font-size: 18px; line-height: 1.56; color: #d4c5ab; }
.amber { color: #fabd00; }
.muted { color: #d4c5ab; }
.label-text {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* =============================================
   HEADER / NAVIGATION  ← THE BIG FIX
   ============================================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  z-index: 1000;
  background: rgba(18, 19, 23, 0.72);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
}

/* Offset for WordPress admin bar */
.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
}

.header-inner {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  height: 96px;
  width: 100%;
}

.site-logo {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 30px;
  font-weight: 500;
  color: #e3e2e7;
  letter-spacing: -0.02em;
  white-space: nowrap;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.site-logo:hover { color: #e3e2e7; }

/* WordPress outputs <ul class="primary-nav"> — reset and flex it */
ul.primary-nav,
.primary-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 40px;
}
ul.primary-nav li,
.primary-nav li {
  list-style: none;
  display: block;
}
ul.primary-nav li a,
.primary-nav li a,
.primary-nav a {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(227, 226, 231, 0.55);
  position: relative;
  display: block;
}
ul.primary-nav li a:hover,
.primary-nav li a:hover,
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
  color: #e3e2e7;
}
.primary-nav .current-menu-item > a::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: #fabd00;
  border-radius: 50%;
}

/* Sub-menus: hide by default */
ul.primary-nav .sub-menu,
.primary-nav .sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #1e1f23;
  border: 1px solid rgba(255,255,255,0.08);
  min-width: 180px;
  padding: 8px 0;
  z-index: 100;
}
ul.primary-nav li:hover .sub-menu { display: block; }

.nav-cta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
}
.btn-login {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e3e2e7;
  background: none;
  border: none;
  padding: 8px 14px;
  -webkit-transition: color 0.3s ease;
  transition: color 0.3s ease;
}
.btn-login:hover { color: #fabd00; }
.btn-signup { padding: 10px 24px; }

/* Mobile hamburger — hidden on desktop */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #e3e2e7;
  padding: 8px;
}
.menu-toggle .material-symbols-outlined { font-size: 28px; }

/* =============================================
   MAIN OFFSET FOR FIXED HEADER
   ============================================= */
.site-main { padding-top: 96px; min-height: 100vh; }
.admin-bar .site-main { padding-top: 128px; }

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
}
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, rgba(18,19,23,.72) 0%, rgba(18,19,23,0) 22%, rgba(18,19,23,0) 78%, rgba(18,19,23,.88) 100%);
  background: linear-gradient(to bottom, rgba(18,19,23,.72) 0%, rgba(18,19,23,0) 22%, rgba(18,19,23,0) 78%, rgba(18,19,23,.88) 100%);
}
.hero-scrim {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.hero-body {
  position: relative;
  z-index: 2;
  text-align: center;
  padding-left: 24px;
  padding-right: 24px;
  max-width: 960px;
  width: 100%;
}
.hero-sub {
  font-size: 18px;
  line-height: 1.56;
  color: #d4c5ab;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 48px;
}
.hero-actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 14px;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 36px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 2;
  color: #fabd00;
  -webkit-animation: tf-bounce 2s infinite;
  animation: tf-bounce 2s infinite;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
@-webkit-keyframes tf-bounce {
  0%, 100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
  50%       { -webkit-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); }
}
@keyframes tf-bounce {
  0%, 100% { -webkit-transform: translateX(-50%) translateY(0); transform: translateX(-50%) translateY(0); }
  50%       { -webkit-transform: translateX(-50%) translateY(8px); transform: translateX(-50%) translateY(8px); }
}

/* =============================================
   STATS BAR  ← FIXED GRID
   ============================================= */
.stats {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr 24px 1fr 24px 1fr;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 64px;
  padding-bottom: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  width: 100%;
}
.stats > div {
  text-align: center;
}
.stat-val {
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: 52px;
  font-weight: 700;
  color: #fabd00;
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}
.stat-lbl {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4c5ab;
  display: block;
}

/* =============================================
   PORTFOLIO GRID
   ============================================= */
.portfolio-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: repeat(12, 1fr);
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.pf-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: #1e1f23;
}
.pf-wide   { grid-column: span 8; aspect-ratio: 16/9; }
.pf-tall   { grid-column: span 4; aspect-ratio: 4/5;  }
.pf-square { grid-column: span 4; aspect-ratio: 1;    }
.pf-wide2  { grid-column: span 8; aspect-ratio: 16/9; }

.pf-item img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transform: scale(1.06);
  transform: scale(1.06);
  -webkit-transition: -webkit-filter 0.7s ease, -webkit-transform 0.7s ease;
  transition: filter 0.7s ease, transform 0.7s ease;
}
.pf-item:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.pf-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, transparent 50%, rgba(18,19,23,.9) 100%);
  background: linear-gradient(to bottom, transparent 50%, rgba(18,19,23,.9) 100%);
  opacity: 0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  padding: 28px;
}
.pf-item:hover .pf-overlay { opacity: 1; }
.pf-cat  { font-family: 'Hanken Grotesk', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: #fabd00; margin-bottom: 6px; }
.pf-name { font-family: 'Bodoni Moda', serif; font-size: 28px; font-weight: 500; color: #e3e2e7; margin-bottom: 6px; }
.pf-meta { font-family: 'Hanken Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(227,226,231,.45); }

/* =============================================
   SERVICE / BENTO CARDS
   ============================================= */
.service-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.bento-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 14px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.bento-card { padding: 32px; }
.bento-card-full {
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-column: 1 / -1;
}
.bento-icon {
  font-size: 32px;
  color: #fabd00;
  margin-bottom: 16px;
  display: block;
}

/* =============================================
   FILTER BAR
   ============================================= */
.filter-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  margin-bottom: 60px;
}
.filter-btn {
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(227, 226, 231, 0.38);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 20px;
  -webkit-transition: color 0.3s ease, border-color 0.3s ease;
  transition: color 0.3s ease, border-color 0.3s ease;
  position: relative;
  bottom: -1px;
}
.filter-btn:hover { color: #e3e2e7; }
.filter-btn.active { color: #fabd00; border-bottom-color: #fabd00; }

/* =============================================
   GEAR / RENTAL
   ============================================= */
.rental-layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 48px 360px;
  grid-template-columns: 1fr 360px;
  gap: 48px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
}
.gear-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 32px 1fr;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 32px;
}
.gear-card {
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.gear-thumb { aspect-ratio: 16/9; overflow: hidden; background: #1e1f23; margin-bottom: 20px; }
.gear-thumb img { width: 100%; height: 100%; object-fit: cover; -webkit-transition: -webkit-transform 0.7s ease; transition: transform 0.7s ease; }
.gear-card:hover .gear-thumb img { -webkit-transform: scale(1.04); transform: scale(1.04); }
.gear-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; margin-bottom: 8px; gap: 16px; }
.gear-name  { font-family: 'Bodoni Moda', serif; font-size: 26px; color: #e3e2e7; }
.gear-price { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; color: #fabd00; white-space: nowrap; }
.gear-spec  { font-size: 15px; color: #d4c5ab; margin-bottom: 16px; }
.gear-link  {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 6px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fabd00;
  background: none;
  border: none;
  -webkit-transition: gap 0.3s ease;
  transition: gap 0.3s ease;
}
.gear-link:hover { gap: 14px; color: #fabd00; }
.rental-sidebar-sticky { position: -webkit-sticky; position: sticky; top: 116px; }
.rental-form-card { background: rgba(30,31,35,.65); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.08); padding: 36px; }

/* =============================================
   CONTACT
   ============================================= */
.contact-layout {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 5fr 24px 7fr;
  grid-template-columns: 5fr 7fr;
  gap: 24px;
}
.contact-block { margin-bottom: 28px; }
.contact-lbl { display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fabd00; margin-bottom: 6px; }
.contact-val { font-family: 'Bodoni Moda', serif; font-size: 28px; color: #e3e2e7; display: block; }
.contact-val:hover { color: #fabd00; }

/* =============================================
   FORMS
   ============================================= */
.tf-form .fg { margin-bottom: 28px; }
.tf-form label {
  display: block;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #d4c5ab;
  margin-bottom: 8px;
}
.tf-form input,
.tf-form select,
.tf-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #4f4632;
  padding: 10px 0;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  color: #e3e2e7;
  outline: none;
  -webkit-transition: border-color 0.3s ease, -webkit-box-shadow 0.3s ease;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.tf-form select { cursor: pointer; }
.tf-form input:focus,
.tf-form select:focus,
.tf-form textarea:focus {
  border-color: #fabd00;
  -webkit-box-shadow: 0 2px 14px rgba(250, 189, 0, 0.14);
  box-shadow: 0 2px 14px rgba(250, 189, 0, 0.14);
}
.tf-form textarea { resize: none; }
.tf-form input[type="date"] { color-scheme: dark; }
.tf-form input::-webkit-input-placeholder,
.tf-form textarea::-webkit-input-placeholder { color: rgba(227,226,231,.22); }
.tf-form input::-moz-placeholder,
.tf-form textarea::-moz-placeholder { color: rgba(227,226,231,.22); }
.tf-form input:-ms-input-placeholder,
.tf-form textarea:-ms-input-placeholder { color: rgba(227,226,231,.22); }
.form-row {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.tf-notice {
  display: none;
  padding: 14px 20px;
  margin-bottom: 20px;
  border-left: 3px solid #fabd00;
  background: rgba(250, 189, 0, 0.07);
  font-size: 15px;
  color: #e3e2e7;
}
.tf-notice.ok  { border-left-color: #4ade80; background: rgba(74, 222, 128, 0.07); }
.tf-notice.err { border-left-color: #ffb4ab; background: rgba(255, 180, 171, 0.07); }

/* =============================================
   TESTIMONIALS
   ============================================= */
.testi-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr 24px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.testi { padding: 28px; border-left: 2px solid rgba(250, 189, 0, 0.3); }
.testi-quote { font-size: 18px; font-style: italic; color: #e3e2e7; line-height: 1.56; margin-bottom: 28px; }
.testi-author { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 14px; }
.testi-line  { width: 36px; height: 1px; background: #fabd00; -ms-flex-negative: 0; flex-shrink: 0; }
.testi-name  { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: #e3e2e7; display: block; }
.testi-role  { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: #d4c5ab; }

/* =============================================
   CINEMATIC STRIP
   ============================================= */
.film-strip {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  margin-top: 80px;
  margin-bottom: 80px;
  cursor: crosshair;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
  -webkit-transition: -webkit-filter 0.7s ease;
  transition: filter 0.7s ease;
}
.film-strip:hover { -webkit-filter: grayscale(0); filter: grayscale(0); }
.film-strip img { width: 100%; height: 100%; object-fit: cover; }
.film-strip::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: -webkit-linear-gradient(top, transparent 60%, #121317 100%);
  background: linear-gradient(to bottom, transparent 60%, #121317 100%);
}
.film-strip-tag {
  position: absolute;
  bottom: 28px;
  left: 28px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 14px;
  z-index: 1;
}
.film-strip-text { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #e3e2e7; }

/* =============================================
   SECTION DIVIDER
   ============================================= */
.divider-row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 16px; margin-bottom: 56px; }
.divider-line { height: 1px; background: rgba(250, 189, 0, 0.18); -webkit-box-flex: 1; -ms-flex: 1; flex: 1; }
.divider-label { font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.4em; text-transform: uppercase; color: #d4c5ab; white-space: nowrap; }

/* =============================================
   BREADCRUMB
   ============================================= */
.breadcrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 8px;
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4c5ab;
  margin-bottom: 28px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.breadcrumb a { color: #d4c5ab; }
.breadcrumb a:hover { color: #fabd00; }
.breadcrumb-sep { color: rgba(227, 226, 231, 0.25); }

/* =============================================
   FOOTER  ← FIXED GRID
   ============================================= */
.site-footer {
  background-color: #0d0e12;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 120px;
}
.footer-grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 24px 1fr 24px 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 80px;
  padding-bottom: 80px;
}
.footer-logo { font-family: 'Bodoni Moda', serif; font-size: clamp(28px, 3vw, 40px); font-weight: 600; color: #e3e2e7; display: block; margin-bottom: 14px; }
.footer-tagline { font-size: 15px; color: #d4c5ab; max-width: 280px; }
.footer-col-title { display: block; font-family: 'Hanken Grotesk', sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #fabd00; margin-bottom: 20px; }
.footer-links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 15px; color: #d4c5ab; -webkit-transition: color 0.3s ease; transition: color 0.3s ease; }
.footer-links a:hover { color: #fabd00; }
.footer-links span { font-size: 15px; color: #d4c5ab; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 80px;
  padding-right: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy { font-family: 'Hanken Grotesk', sans-serif; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(227, 226, 231, 0.22); }

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #0d0e12; }
::-webkit-scrollbar-thumb { background: #4f4632; }
::-webkit-scrollbar-thumb:hover { background: #9c8f78; }

/* =============================================
   UTILITIES
   ============================================= */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; vertical-align: middle; }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .wrap { padding-left: 48px; padding-right: 48px; }
  .footer-bottom { padding-left: 48px; padding-right: 48px; }
}

@media (max-width: 900px) {
  .primary-nav { display: none !important; }
  .btn-login    { display: none; }
  .menu-toggle  { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; }
  .primary-nav.open {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: fixed;
    top: 96px;
    left: 0;
    right: 0;
    background: #1e1f23;
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: 32px 24px;
    gap: 24px;
    z-index: 999;
  }
  .service-grid  { grid-template-columns: 1fr; }
  .bento-grid    { grid-template-columns: 1fr; }
  .bento-card-full { grid-column: span 1; }
  .contact-layout { grid-template-columns: 1fr; }
  .rental-layout  { grid-template-columns: 1fr; }
  .testi-grid     { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .pf-wide, .pf-tall, .pf-square, .pf-wide2 { grid-column: span 12; aspect-ratio: 16 / 9; }
  .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  .footer-bottom { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: 80px; padding-bottom: 80px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stat-val { font-size: 40px; }
}

@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .hero-actions { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; }
  .hero-actions .btn { width: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    -webkit-animation-duration: .01ms !important;
    animation-duration: .01ms !important;
    -webkit-transition-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}