:root {
  --bg: #5a86ad;   /* site background */
  --text: #F4BC1C; /* header text */
  --btn-bg: #274d6e; /* blue for buttons */
  --btn-hover: #5a86ad; /* deep blue hover */
  --btn-text: #F4BC1C; /* black text on buttons */
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

/* Header */
/* Default (desktop/tablet) is already good */
.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2rem 3rem;
  background: var(--bg);
  border-bottom: 3px solid var(--text);
}

.logo {
  margin: 0;
  font-size: 3rem; /* fixed size */
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header nav a {
  margin-left: 2.5rem;
  text-decoration: none;
  color: var(--text);
  font-size: 1.2rem; /* fixed size */
  font-weight: 600;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .site-header {
    padding: 1rem 1.5rem;   /* less padding */
  }

  .site-header nav a {
    margin-left: 1rem;      /* less spacing between links */
  }
}


/* Question Screen */
.question-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
  text-align: center;
}

#typed-question {
  font-size: 2rem;
  margin-bottom: 2rem;
}

.options {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  transition: all 0.5s ease;
}

/*tab bar mode*/
.options.sticky {
  position: sticky;
  top: 0;
  background: var(--bg);
  padding: 1rem;
  z-index: 5;
  justify-content: center;
}

.options button {
  background: var(--bg);        /* same as site background */
  color: var(--text);           /* black text */
  border: 2px solid var(--text);/* black outline */
  border-radius: 4px;           /* squared look, can set to 0 if you want hard squares */
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.2s;
}

.options button:hover {
  background: var(--text);   /* fill black on hover */
  color: var(--bg);          /* text turns blue */
  transform: scale(1.05);
}


/* pintrest Gallery */
.home-gallery {
  column-count: 3;       /* 3 columns on desktop */
  column-gap: 20px;      /* space between columns */
  padding: 2rem;
  opacity: 0;
  transition: opacity 0.8s ease-in;
}

.home-gallery.visible {
  opacity: 1;
}

@media (max-width: 900px) {
  .home-gallery { column-count: 2; }
}
@media (max-width: 600px) {
  .home-gallery { column-count: 1; }
}


.gallery-item {
  display: inline-block; /* important for column flow */
  width: 100%;
  margin: 0 0 20px;      /* spacing under each image */
  break-inside: avoid;   /* prevents awkward splits */
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}


/* hoover */

.gallery-item {
  overflow: hidden; /* keeps the image from spilling outside when zoomed */
  border-radius: 0; /* square edges, you can round if you want */
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect */
.gallery-item:hover img {
  transform: scale(1.05);   /* slight zoom */
  filter: brightness(0.9);  /* darken a bit */
}


.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect */
.gallery-item:hover img {
  transform: scale(1.05);   /* slight zoom */
  filter: brightness(0.9);  /* darken a bit */
}

/* car rows */
.car-gallery {
  display: flex;
  flex-direction: column;
  height: 100vh;          /* take full screen height */
  width: 100vw;           /* full viewport width */
  overflow: hidden;
  background: var(--bg);
  gap: 2rem;              /* space between rows */
  padding: 0;             /* remove padding so rows span edge-to-edge */
}

.car-row {
  display: flex;
  width: 200%;            /* double width for looping */
}

.car-row img {
  height: 50vh;           /* 2 rows → each row half screen height */
  width: auto;
  flex-shrink: 0;
  object-fit: cover;
  margin-right: 1rem;
}

/* Keyframes: scroll the entire duplicated row */
@keyframes scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); } /* move full width */
}

@keyframes scroll-right {
  from { transform: translateX(-100%); } /* start shifted left */
  to   { transform: translateX(0); }     /* slide back */
}

.car-row.scroll-left {
  animation: scroll-left 30s linear infinite;
}

.car-row.scroll-right {
  animation: scroll-right 30s linear infinite;
}

/* Faster on mobile but still infinite */
@media (max-width: 768px) {
  .car-row.scroll-left,
  .car-row.scroll-right {
    animation-duration: 15s;
  }
}



/* ABOUT */
.about-section {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  padding: 3rem;
  max-width: 1200px;
  margin: 0 auto;
}

.about-photo {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

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

/* Camera shutter effect */
.camera-effect img {
  animation: cameraZoom 1.2s ease-out forwards, cameraFlash 0.8s ease-out;
}

@keyframes cameraZoom {
  0% { transform: scale(1.2); opacity: 0.8; }
  60% { transform: scale(0.98); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes cameraFlash {
  0% { filter: brightness(1.8); }
  100% { filter: brightness(1); }
}

/* Text */
.about-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.2rem;
  line-height: 1.4;
  font-weight: 900;        /* all bold */
  text-transform: uppercase; /* all uppercase */
  gap: 0.5rem;
}

.signature {
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* Sequential fade animation */
.fade-seq {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-seq.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 900px) {
  .about-section {
    flex-direction: column;
    text-align: center;
  }
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(10px); }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
}

.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

/* contact pafge */
      /* Contact Page Specific Styling */
      .contact-section {
        display: flex;
        justify-content: center;
        align-items: flex-start;   /* align like About page */
        min-height: calc(100vh - 100px); /* leave room for header */
        padding: 2rem;
        background: var(--bg);
      }

      .contact-form {
        background: var(--bg);
        border: 3px solid var(--text);
        padding: 2rem 3rem;
        width: 100%;
        max-width: 1200px;         /* match About section scale */
        text-align: center;
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        margin: 0 auto;
      }

      /* Typography scales just like About */
      .contact-form h2 {
        font-size: clamp(2rem, 6vw, 3rem);
        font-weight: 900;
        margin-bottom: 0.5rem;
        text-transform: uppercase;
        color: var(--text);
      }

      .contact-form p {
        font-size: clamp(1rem, 3.5vw, 1.3rem);
        margin-bottom: 2rem;
        color: var(--text);
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .contact-form label {
        font-size: clamp(0.9rem, 3vw, 1.1rem);
        font-weight: 700;
        color: var(--text);
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.05em;
      }

      .contact-form input,
      .contact-form textarea {
        width: 100%;
        padding: 1rem;
        border: 2px solid var(--text);
        background: var(--bg);
        color: var(--text);
        font-size: clamp(1rem, 3vw, 1.2rem);
        outline: none;
        font-family: inherit;
      }

      .contact-form button {
        background: var(--bg);
        border: 2px solid var(--text);
        color: var(--text);
        padding: 1rem;
        font-size: clamp(1rem, 3vw, 1.2rem);
        font-weight: 700;
        text-transform: uppercase;
        cursor: pointer;
        transition: background 0.3s, color 0.3s;
        width: 100%;
        margin-top: 1rem;
      }

      .contact-form button:hover {
        background: var(--text);
        color: var(--bg);
      }