@charset "UTF-8";
/* CSS Document */

:root {
  --font-body: "Helvetica Neue", Helvetica, Arial,
               "Segoe UI", Roboto, "Noto Sans",
               system-ui, -apple-system, "Apple Color Emoji",
               "Segoe UI Emoji", sans-serif;
  --bg: #000000;
  --lh-body: 1.6;
  --accent: #d4a853;
}

body {
    margin: 0;
    background: var(--bg);
    color: #FFFFFF;
    line-height: var(--lh-body);
    text-align: center;
    font-family: "Bahnschrift Light", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
}

#bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50%;
  z-index: -2;
}

/* Scrim stays above video for legibility */
.video-scrim {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,0.15);
}

/* Content sits above (default z-index is fine) */
.hero, .tag-line, .contact-block { position: relative; z-index: 0; }

/* IMPORTANT: Remove any rule that did this previously */
@media (max-width: 768px) {
  /* ❌ DO NOT set object-fit: contain here — it will break the full-bleed effect */
  /* #bg-video { object-fit: contain; } */
}

/* OPTIONAL: keep this off unless you truly want to hide video for low-data users */
@media (prefers-reduced-data: reduce){
  /* Comment this out if you want video always visible */
  /* #bg-video { display:none; } */
}

/* Logo - keeping your original size and positioning */
.brand-logo-on-video {
  margin-top: 300px;  /* keeping your original value */
  height: auto;
}

/* Tagline - keeping your original styling */
.tag-line {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
    font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
    font-style: oblique;
    font-weight: 450;
    font-size: 30px;  
}

/* Hero - keeping your original large size and margins for scroll effect */
.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 80vh;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-family: "Bahnschrift Light", Myriad Pro,"sans-serif", "DejaVu Sans Condensed", Helvetica, Arial;
    font-style: normal;
    font-weight: 500;
    font-size: 60px;  /* keeping your original size */
    margin-top: 1000px;  /* keeping your original scroll timing */
    margin-bottom: 600px;  /* keeping your original spacing */
}

.hero p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 8;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 60vh;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
    font-family: Akkurat, "Akkurat Bold", "Akkurat Italic", "Akkurat Light";
    font-style: normal;
    font-weight: 500;
    font-size: 60px;
    margin-top: 1000px;
    margin-bottom: 400px;
}

.main p {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  line-height: 1.5;
}

.contact-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
}

.contact {
  display: inline-block;
  padding: 1.5rem 2rem;
  background-color: var(--accent);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-family: "Bahnschrift Light", "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  font-style: normal;
  font-weight: 500;
  font-size: 40px;
  transition: background-color 0.3s ease;
  text-align: center;
}

.contact:hover {
  background-color: #b9922c;
}

.contact-link {
  color: #fff;
  text-decoration: none;
}

.social-icon {
  display: block;
  margin-top: 5px;
}

.instagram-img {
  width: 80px;
  height: auto;
  filter: brightness(0) invert(1);
  transition: transform 0.3s ease;
}

.instagram-img:hover {
  transform: scale(1.1);
}