@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@700;800;900&family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  /* Original theme colors */
  --base-color: #0a0a0a;
  --secondary-color: #ffffff;
  --accent-color: #FFCE1B;
  --heading-font: 'Poppins', sans-serif;
  --subheading-font: 'Inter', sans-serif;
  --body-font: 'Poppins', sans-serif;

  /* Reference theme colors (F1/Luxury) */
  --color-f1-red: var(--accent-color);
  --color-luxury-black: #050505;
  --color-luxury-gray: #1a1a1a;

  /* Reference theme fonts */
  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-display: 'Outfit', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* UI state */
  --is-light-theme: 0;
  --slide-overlay-opacity: 0.55;
  --card-bg: #1a1a1a;
  --card-border: #222;
  --card-hover: #222;
  --input-bg: #1a1a1a;
  --input-border: #333;
  --muted-text: rgba(255,255,255,0.6);
  --footer-bg: var(--base-color, #050505);
  --footer-border: #222;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --hover-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --hover-duration: 0.5s;

  /* Lenis smooth scroll */
  --lenis-duration: 1.2;
  --lenis-easing: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--body-font);
  background: var(--base-color);
  color: var(--secondary-color);
  overflow-x: hidden;
  line-height: 1.6;
}

/* Reference Hero */
.outline-text {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.4);
  color: transparent;
}

[data-hero-line] {
  background-color: var(--hero-indicator-color, var(--accent-color));
}

[data-hero-dot] {
  background-color: var(--hero-indicator-color, var(--accent-color));
  box-shadow: 0 0 20px var(--hero-indicator-glow, rgba(255, 206, 27, 0.5));
}

[data-hero-container] {
  background: var(--color-luxury-black, var(--base-color));
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.4);
  transition: color var(--hover-duration) var(--hover-ease);
}

.social-icon svg {
  stroke: currentColor;
  fill: none;
  transition: stroke var(--hover-duration) var(--hover-ease);
}

.social-icon:hover {
  color: var(--accent-color);
}

.social-icon:hover svg {
  stroke: var(--accent-color);
}

/* Lenis smooth scroll requirements */
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* Reference Editorial Grid */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

[data-editorial-grid] {
  background: var(--color-luxury-black, var(--base-color));
}

[data-editorial-grid] > div:first-child {
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 60px;
}

[data-editorial-horizontal] {
  padding-left: 50px;
  padding-right: 50px;
}

[data-editorial-horizontal] .article-card img {
  will-change: transform;
}

[data-scramble-text] .scramble-char {
  display: inline-block;
  white-space: pre;
  will-change: transform, filter;
}

[data-scramble-text] .scramble-char.is-scrambling {
  filter: blur(2px);
  transform: translateY(-2px);
}

.issue-text a {
  transition: color 0.3s;
}

.issue-text a:hover {
  color: var(--accent-color);
}

/* Reference Tech Stats */
[data-tech-stats] {
  background: var(--color-luxury-black, var(--base-color));
}

/* Testimonial cards stack in a single grid cell, so the track grows to fit the
   TALLEST card instead of a hard-coded height.

   This replaces `h-[400px] md:h-[440px]` on the track plus `absolute inset-0
   h-full overflow-hidden` on each card. That combination silently clipped long
   quotes on mobile: the card was always exactly 400px tall, and a phone fits
   roughly half the text a desktop does (~240 vs ~450 characters) because the
   column is narrower and the font is smaller.

   min-height preserves today's appearance for short quotes; only long ones grow.
   GSAP animates the cards on x/opacity, which works fine on grid items sharing
   a cell, and their inline z-index still controls stacking order. */
[data-tech-track] {
  display: grid;
  min-height: 400px;
}

@media (min-width: 768px) {
  [data-tech-track] {
    min-height: 440px;
  }
}

[data-tech-track] .testimonial-card {
  grid-area: 1 / 1;
  position: relative;
  will-change: transform;

  /* Padding MUST be set here, not via `p-8` in the markup.

     style.css:42 has an unlayered `* { margin: 0; padding: 0 }` reset, and
     unlayered rules beat layered ones - all of Tailwind's utilities live inside
     @layer utilities. That reset therefore silently defeats every Tailwind
     spacing utility on the entire site. At specificity (0,2,0) this rule wins
     over both the reset and the utility.

     32px on mobile / 40px from md up, which is what the markup always intended. */
  padding: 32px;
}

@media (min-width: 768px) {
  [data-tech-track] .testimonial-card {
    padding: 40px;
  }
}

[data-tech-track] .testimonial-card blockquote p {
  font-weight: 400;
  letter-spacing: normal;
}

/* Live: these target the card's real children (quote wrapper, footer). */
[data-tech-track] .testimonial-card > div:nth-child(2) {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

[data-tech-track] .testimonial-card > div:nth-child(3) {
  padding-top: 1rem;
}

/* Reference Footer */
footer {
  background: var(--color-luxury-black, var(--base-color));
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

footer a:hover {
  color: var(--color-f1-red, var(--accent-color));
}

/* Nav */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  padding: 20px 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1000;
  background: transparent;
  transition: background var(--hover-duration) var(--hover-ease);
}

nav.scrolled {
  background: transparent;
}

.logo {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.logo span {
  color: var(--accent-color);
}

.logo-img {
  height: 40px;
  width: auto;
}

.nav-links {
  display: flex;
  gap: 30px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nav-links a {
  text-decoration: none;
  color: var(--secondary-color);
  font-family: var(--subheading-font);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  position: relative;
  transition: color var(--hover-duration) var(--hover-ease);
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent-color);
  transition: width var(--hover-duration) var(--hover-ease);
}

.nav-links a:hover {
  color: var(--accent-color);
}

.nav-links a:hover::after {
  width: 100%;
}

.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(5, 5, 5, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

nav.nav-open .nav-overlay {
  opacity: 1;
  pointer-events: auto;
}

.nav-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
}

.nav-overlay .nav-links {
  position: static;
  transform: none;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Logo at the top of the hamburger overlay: the header logo
   compiles into the hamburger on scroll, so the overlay is
   where it lives while the menu is open. */
.nav-overlay .logo-img {
  height: 56px;
}

.nav-overlay .nav-links a {
  font-size: 14px;
  letter-spacing: 0.4em;
  color: var(--secondary-color);
  transition: color var(--hover-duration) var(--hover-ease);
}

.nav-overlay .nav-links a::after {
  bottom: -8px;
  height: 2px;
}

.nav-overlay .nav-links a:hover {
  color: var(--accent-color);
}

.nav-overlay .social-icon {
  color: var(--secondary-color);
  transition: color var(--hover-duration) var(--hover-ease), transform var(--hover-duration) var(--hover-ease);
}

.nav-overlay .social-icon:hover {
  color: var(--accent-color);
  transform: translateY(-2px);
}

/* Section 1: Hero Carousel */
#hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slide.active {
  opacity: 1;
  z-index: 1;
}

.slide video, .slide .video-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

.slide .video-fallback {
  background: var(--base-color);
}

.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--slide-overlay-bg);
  opacity: var(--slide-overlay-opacity, 0.55);
  z-index: 2;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -40%);
  transition: all 0.8s var(--ease-out-expo) 0.5s;
}

.slide.active .slide-content {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.slide-content h2 {
  font-family: var(--heading-font);
  font-size: 3.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 5px;
  margin-bottom: 20px;
  color: var(--accent-color);
}

.slide-content p {
  font-family: var(--body-font);
  font-size: 1.1rem;
  color: var(--secondary-color);
  max-width: 600px;
  margin: 0 auto;
}

/* Carousel Controls */
.carousel-controls {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 15px;
}

.carousel-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--secondary-color);
  opacity: 0.4;
  cursor: pointer;
  transition: background var(--hover-duration) var(--hover-ease), transform var(--hover-duration) var(--hover-ease), opacity var(--hover-duration) var(--hover-ease);
}

.carousel-dot.active {
  background: var(--accent-color);
  opacity: 1;
  transform: scale(1.2);
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: all var(--hover-duration) var(--hover-ease);
}

.carousel-arrow:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--base-color);
}

.carousel-arrow.prev { left: 30px; }
.carousel-arrow.next { right: 30px; }

/* Section 2: Portfolio */
#portfolio {
  padding: 100px 50px;
  min-height: 100vh;
  background: var(--base-color);
}

.section-header {
  text-align: center;
  margin-bottom: 80px;
}

.section-header h2 {
  font-family: var(--heading-font);
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.section-header p {
  color: var(--accent-color);
  font-family: var(--subheading-font);
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.portfolio-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  aspect-ratio: 4/3;
}

.portfolio-item.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out-expo);
}

.portfolio-item.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-item:hover {
  transform: translateY(0);
}

.portfolio-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out-expo);
}

.portfolio-item:hover img {
  transform: scale(1.05);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h3 {
  font-family: var(--heading-font);
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s var(--ease-out-expo) 0.1s;
}

.portfolio-item:hover .portfolio-overlay h3 {
  transform: translateY(0);
  opacity: 1;
}

/* Portfolio Modal */
.portfolio-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(20px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.portfolio-modal.open {
  opacity: 1;
  pointer-events: all;
}

.portfolio-modal-content {
  display: flex;
  width: 80%;
  max-width: 1200px;
  max-height: 90vh;
  gap: 50px;
}

.portfolio-modal-img {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-modal-img img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out-expo);
}

.portfolio-modal.open .portfolio-modal-img img {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-modal-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.portfolio-modal-info h3 {
  font-family: var(--heading-font);
  font-size: 2rem;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out-expo);
}

.portfolio-modal-info p {
  color: rgba(255,255,255,0.7);
  line-height: 1.8;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease, transform 0.7s var(--ease-out-expo);
}

.portfolio-modal.open .portfolio-modal-info h3,
.portfolio-modal.open .portfolio-modal-info p {
  opacity: 1;
  transform: translateY(0);
}

.portfolio-close {
  position: absolute;
  top: 30px;
  right: 30px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.5rem;
  transition: all var(--hover-duration) var(--hover-ease);
}

.portfolio-close:hover {
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--base-color);
}

/* Section 3: Services */
#services {
  padding: 100px 50px;
  background: linear-gradient(to bottom, var(--base-color), var(--section-gradient-color, var(--base-color)));
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  position: relative;
  padding: 50px 30px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--hover-duration) var(--hover-ease), background var(--hover-duration) var(--hover-ease);
}

.service-card:hover {
  border-color: var(--accent-color);
  background: var(--card-hover);
}

.service-icon {
  font-size: 2.5rem;
  margin-bottom: 20px;
  display: block;
}

.service-icon > .icon-svg {
  width: 3.5rem;
  height: 3.5rem;
}

.icon-svg {
  display: inline-block;
  width: inherit;
  height: inherit;
  line-height: 0;
}

.icon-svg svg {
  width: 100%;
  height: 100%;
  display: block;
}

.social-icon > .icon-svg {
  width: 1.5rem;
  height: 1.5rem;
}

.service-icon img,
.social-icon img {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.social-icon img {
  width: 1.5rem;
  height: 1.5rem;
}

.service-card h3 {
  font-family: var(--heading-font);
  font-size: 1.3rem;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.service-card p.service-brief {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.service-desc {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 50px 30px;
  background: var(--accent-color);
  color: var(--base-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.service-card:hover .service-desc {
  opacity: 1;
  pointer-events: all;
}

.service-desc h3 {
  color: var(--base-color);
  margin-bottom: 15px;
}

.service-desc p {
  color: var(--base-color);
  line-height: 1.7;
}

/* Section 4: Why Us */
#why-us {
  padding: 100px 50px;
  background: var(--base-color);
}

.why-us-container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  gap: 60px;
  align-items: flex-start;
}

/* Section 5: Contact */
#contact {
  padding: 100px 50px;
  background: linear-gradient(to bottom, var(--section-gradient-color, var(--base-color)), var(--base-color));
}

.contact-container {
  display: flex;
  gap: 60px;
  max-width: 1200px;
  margin: 0 auto;
}

.contact-form-area {
  flex: 1;
}

.contact-form-area h2 {
  font-family: var(--heading-font);
  font-size: 2.5rem;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 15px;
}

.contact-form-area .subtitle {
  color: var(--accent-color);
  font-family: var(--subheading-font);
  font-size: 0.9rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 30px;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 15px 20px;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--secondary-color);
  font-family: var(--body-font);
  font-size: 0.95rem;
  transition: border-color var(--hover-duration) var(--hover-ease);
  appearance: auto;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

.contact-form button {
  padding: 15px 30px;
  background: var(--accent-color);
  color: var(--base-color);
  border: none;
  font-family: var(--heading-font);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
  transition: background var(--hover-duration) var(--hover-ease), transform var(--hover-duration) var(--hover-ease);
}

.contact-form button:hover {
  background: var(--accent-color);
  transform: translateY(-2px);
}

/* Contact section CTA + modal submit — direct styling */
.btn-primary {
  display: inline-flex;
  align-items: center;
  padding: 18px 40px;
  background: var(--accent-color, #facc15);
  color: var(--base-color, #0a0a0a) !important;
  border: none;
  font-family: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  font-size: 0.875rem;
  cursor: pointer;
  transition: none;
}
.btn-primary:hover {
  background: var(--accent-color, #facc15);
}

.social-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 20px;
  background: var(--card-bg);
  text-decoration: none;
  color: var(--secondary-color);
  border-left: 3px solid transparent;
  transition: all var(--hover-duration) var(--hover-ease);
}

.social-link:hover {
  border-left-color: var(--accent-color);
  background: var(--card-hover);
}

.social-icon {
  font-size: 1.5rem;
}

.social-title {
  font-family: var(--subheading-font);
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Footer */
footer {
  padding: 60px 50px 30px;
  background: var(--footer-bg);
  border-top: 1px solid var(--footer-border);
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  margin-bottom: 40px;
}

.footer-info p {
  color: var(--muted-text);
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  gap: 40px;
}

.footer-links h4 {
  font-family: var(--heading-font);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 15px;
}

.footer-links a {
  display: block;
  color: var(--muted-text);
  text-decoration: none;
  font-size: 0.85rem;
  margin-bottom: 8px;
  transition: color var(--hover-duration) var(--hover-ease);
}

.footer-links a:hover {
  color: var(--accent-color);
}

.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--footer-border);
  text-align: center;
  color: var(--muted-text);
  font-size: 0.85rem;
}

/* Animations */
body {
  opacity: 0;
  animation: fadeIn 1s ease forwards;
}

.typed-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(8px);
  will-change: opacity, transform;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

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

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
  animation: fadeUp 0.7s ease forwards;
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

.fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.fade-right.visible {
  opacity: 1;
  transform: translateX(0);
  animation: fadeRight 0.7s ease forwards;
}

/* Parallax */
[data-parallax] {
  will-change: transform;
}

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-modal-content {
    width: 90%;
  }
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 1001;
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.hamburger span {
  position: absolute;
  left: 0;
  width: 25px;
  height: 2px;
  background: var(--secondary-color);
  transition: all 0.3s ease;
  transform-origin: center;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.hamburger span:nth-child(3) {
  bottom: 0;
}

.nav-open .hamburger span:nth-child(1) {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.nav-open .hamburger span:nth-child(2) {
  opacity: 0;
}

.nav-open .hamburger span:nth-child(3) {
  bottom: 50%;
  transform: translateY(50%) rotate(-45deg);
}

@media (max-width: 768px) {
  nav {
    padding: 15px 20px;
  }

  /* ---- Mobile header: logo + hamburger, menu behind the button ----------
     The hamburger is opacity:0 / pointer-events:none in the base rule (it is
     deliberately hidden on desktop, where the inline nav links are shown).
     Nothing ever turned it back on, and nothing ever hid the inline nav
     links, so on a phone the header showed the nav items crammed in beside
     the logo and the menu button was invisible AND unclickable.

     Scoped with `> ` so only the header's own .nav-links is hidden - the one
     inside .nav-overlay is the actual menu and must stay. */
  #navbar > .nav-links {
    display: none;
  }

  /* The header social icons move into the overlay on mobile. This is not
     optional: the hamburger is absolutely positioned at right:20px and would
     sit directly on top of them. The overlay already renders the same icons. */
  #navbar > .flex > .social-icon {
    display: none;
  }

  /* The logo stays in the mobile header (logo + hamburger), so the
     copy inside the overlay menu would be redundant. */
  .nav-overlay .logo-container {
    display: none;
  }

  .hamburger {
    right: 20px;
    opacity: 1;
    pointer-events: auto;
  }

  .nav-overlay .nav-links a {
    font-size: 12px;
    letter-spacing: 0.3em;
  }

  .slide-content h2 {
    font-size: 2.2rem;
    letter-spacing: 3px;
  }

  .slide-content p {
    font-size: 0.95rem;
    padding: 0 15px;
  }

  .carousel-controls {
    bottom: 30px;
  }

  #portfolio,
  #services {
    padding: 80px 20px;
  }

  .portfolio-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  .section-header {
    margin-bottom: 50px;
  }

  .section-header h2 {
    font-size: 2rem;
  }

  .why-us-container,
  .contact-container {
    flex-direction: column;
  }

  .why-us-container {
    gap: 40px;
  }

  #contact {
    padding: 80px 20px;
  }

  .contact-form-area h2 {
    font-size: 2rem;
  }

  .footer-container {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-links {
    flex-direction: column;
    gap: 25px;
  }

  .portfolio-modal-content {
    flex-direction: column;
    width: 90%;
    gap: 30px;
  }

  .portfolio-modal-info h3 {
    font-size: 1.5rem;
  }

  .portfolio-close {
    top: 15px;
    right: 15px;
  }
}

@media (max-width: 480px) {
  nav {
    padding: 12px 15px;
  }

  .logo {
    font-size: 1.2rem;
  }

  .slide-content h2 {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }

  .slide-content p {
    font-size: 0.9rem;
  }

  .section-header {
    margin-bottom: 40px;
  }

  .section-header h2 {
    font-size: 1.8rem;
  }

  #portfolio,
  #services,
  #why-us,
  #contact {
    padding: 60px 15px;
  }

  .contact-form-area h2 {
    font-size: 1.8rem;
  }

  .carousel-arrow {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }

  .carousel-arrow.prev { left: 5px; }
  .carousel-arrow.next { right: 5px; }

  .service-card {
    padding: 35px 25px;
  }

  .service-desc {
    padding: 35px 25px;
  }
}

/* Contact sidebar — slides in from right to left */
.contact-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 520px;
  height: 100vh;
  background: var(--luxury-black, #050505);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 9999;
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.6);
}

.contact-sidebar.open {
  transform: translateX(0);
}

.contact-sidebar-inner {
  padding: 48px 40px 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 100%;
}

.contact-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

/* Spam trap: the honeypot field. Pushed off-screen rather than
   display:none, so bots that parse the DOM still find and fill it while
   people never see or focus it. */
.contact-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Contact form's Country select.

   The expanded option list is painted by the operating system, not by the
   page, so it ignores the control's own background and colour - that is why
   it showed a white list with white text. Styling option/optgroup directly is
   what fixes the list, and color-scheme additionally turns the native popup
   chrome (scrollbar, selection highlight) dark instead of the light system
   default.

   Note the older `.contact-form select` rules further up this file never
   applied: the sidebar form is identified by id="contact-form" and carries no
   class of that name, so those selectors matched nothing. */
#contact-country {
  color-scheme: dark;
  background-color: #000;
  color: #fff;
}

#contact-country option {
  background-color: #000;
  color: var(--accent-color, #facc15);
}

#contact-country optgroup {
  background-color: #000;
  color: rgba(255, 255, 255, 0.55);
  font-style: normal;
  font-weight: 700;
}

/* "Not selected" is a placeholder, not a country name. */
#contact-country option[value=""] {
  color: rgba(255, 255, 255, 0.45);
}

.contact-sidebar-close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.5);
  font-size: 28px;
  line-height: 1;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.contact-sidebar-close:hover {
  color: #fff;
  border-color: var(--accent-color, #facc15);
  background: rgba(250, 204, 21, 0.08);
}

.contact-sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.contact-sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}