/* ============================================================
   SAN CASTELLO — Vanilla CSS (No Tailwind)
   Faithfully replaces every Tailwind utility used in index.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&display=swap');

/* ── Design Tokens ───────────────────────────────────────── */
:root {
  --background:       #0A0A0A;
  --foreground:       #FAFAFA;
  --foreground-muted: #A0A0A0;
  --accent:           #FF3366; /* Vibrant Pink/Red */
  --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --max-w:            80rem; /* max-w-7xl = 1280px */
}

/* ── Reset / Base ────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-y: scroll;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}

img, svg {
  display: block;
}

/* ── Grain overlay ───────────────────────────────────────── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
  background-color: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}

/* ── Scrollbar ───────────────────────────────────────────── */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555555; }

/* ============================================================
   SITE BODY
   ============================================================ */
.site-body {
  overflow: hidden; /* hides scroll on load; JS removes this */
}

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  width: 100%;
  background-color: color-mix(in srgb, var(--background) 30%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* initial GSAP state */
  opacity: 0;
  transform: translateY(-20px);
  transition: color 0.3s ease;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 2rem;      /* p-8 */
}

@media (min-width: 768px) {
  .header-inner {
    padding: 2rem 3rem; /* md:px-12 md:py-8 */
  }
}

/* Logo */
.logo-link {
  font-size: 1.25rem;   /* text-xl */
  font-weight: 800;     /* font-extrabold */
  letter-spacing: 0.05em; /* tracking-wider */
  transition: color 0.3s ease;
}
.logo-link:hover { color: var(--accent); }

/* Desktop Nav */
.desktop-nav {
  display: none;
  align-items: center;
  gap: 2rem;            /* space-x-8 */
  pointer-events: auto;
}
@media (min-width: 768px) {
  .desktop-nav { display: flex; }
}

.nav-link {
  font-size: 0.875rem;  /* text-sm */
  font-weight: 500;
  letter-spacing: 0.05em;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  transition: color 0.2s;
}
.nav-link:hover { color: var(--foreground); }

/* Underline link effect */
.nav-link-underline {
  position: relative;
  display: inline-block;
}
.nav-link-underline::before {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  color: var(--hover-color, var(--accent));
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.2s var(--transition-smooth);
}
.nav-link-underline::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -4px; left: 0;
  background-color: var(--hover-color, var(--accent));
  transform-origin: left;
  transition: transform 0.2s var(--transition-smooth);
}
.nav-link-underline:hover::before { clip-path: inset(0 0 0 0); }
.nav-link-underline:hover::after  { transform: scaleX(1); }

/* Hamburger button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 6px;             /* space-y-1.5 */
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}
@media (min-width: 768px) {
  .mobile-menu-btn { display: none; }
}

.hamburger-line {
  display: block;
  height: 2px;          /* h-0.5 */
  width: 1.5rem;        /* w-6 */
  background-color: var(--foreground);
  transition: background-color 0.3s ease;
}
.hamburger-line--short { width: 1.25rem; align-self: flex-end; } /* w-5 self-end */
.mobile-menu-btn:hover .hamburger-line { background-color: var(--accent); }

/* ============================================================
   CIRCLE WRAPPER
   ============================================================ */
.circle-wrapper {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.circle-el {
  height: 280px;
  width:  280px;
  border-radius: 50%;
  /* initial GSAP state */
  opacity: 0;
  will-change: transform, opacity, box-shadow;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
@media (min-width: 768px) {
  .circle-el { height: 350px; width: 350px; }
}
@media (min-width: 1024px) {
  .circle-el { height: 420px; width: 420px; }
}

/* ============================================================
   SHARED SECTION OVERLAY (menu / gallery / contact fixed layers)
   ============================================================ */
.section-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   MENU OVERLAY
   ============================================================ */
/* Offer images */
.offer-img {
  opacity: 0;
  transform: scale(0.5);
  position: absolute;
  pointer-events: none;
  max-width: 29rem;
}

.offer-img-2{
  margin-bottom: -100px;
  transform: scale(1.15);
}

.offer-img-4{
  margin-bottom: -100px;
}

.menu-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;         /* gap-12 */
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  padding: 2rem;     /* p-8 */
  pointer-events: none;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .menu-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;       /* md:gap-16 */
    padding: 3rem;   /* md:p-12 */
  }
}

.menu-heading-col {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 250px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 18vh;
}
@media (min-width: 768px) {
  .menu-heading-col { min-height: 100%; }
}

.menu-master-heading {
  --accent: #00F0FF; /* matches 01 item */
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(30px);
  pointer-events: none;
}

.menu-title {
  font-size: 3.75rem; /* text-6xl */
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--foreground);
  line-height: 1;
}
@media (min-width: 1024px) {
  .menu-title { font-size: 6rem; } /* lg:text-8xl */
}

.menu-cats-col {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 250px;
  align-items: center;
  justify-content: flex-start;
}
@media (min-width: 768px) {
  .menu-cats-col { min-height: 100%; }
}

.menu-cats-inner {
  width: 100%;
  position: relative;
  height: 60vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Each category card */
.menu-cat {
  position: absolute;
  opacity: 0;
  transform: translateY(50px);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;       /* space-y-6 */
}

.cat-number {
  font-size: 0.75rem; /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.cat-heading {
  font-size: 3rem;   /* text-5xl */
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--foreground);
  line-height: 1.1;
}
@media (min-width: 768px) {
  .cat-heading { font-size: 4.5rem; } /* md:text-7xl */
}

.cat-description {
  font-size: 1.125rem; /* text-lg */
  line-height: 1.625;
  color: var(--foreground-muted);
  max-width: 28rem;  /* max-w-md */
}

/* Menu CTA */
.menu-cta {
  --accent: #00FF66; /* Match 04 item color */
  position: absolute;
  bottom: 0; left: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: auto;
  padding-bottom: 1rem; /* pb-4 */
}

/* ============================================================
   SHARED CTA LINK
   ============================================================ */
.cta-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--foreground);
  transition: color 0.3s ease;
  gap: 0.25rem;
}
.cta-link:hover { color: var(--accent); }

.cta-link__text {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s ease;
}
.cta-link:hover .cta-link__text {
  text-decoration-color: var(--accent);
}

.cta-link__arrow {
  width: 1rem; height: 1rem;
  margin-left: 0.25rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.cta-link:hover .cta-link__arrow { transform: translateX(4px); }

/* Contact CTA is uppercase + widest tracking */
.contact-cta-wrap .cta-link {
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ============================================================
   GALLERY OVERLAY
   ============================================================ */
.gallery-overlay {
  opacity: 0;
  visibility: hidden;
}

.gallery-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  padding: 2rem;
  pointer-events: none;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .gallery-inner { padding: 3rem; }
}

.gallery-master-heading {
  --accent: #FFEA00; /* Yellow accent */
  position: absolute;
  top: 20vh;
  right: 8vw;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  text-align: right;
  z-index: 10;
}
@media (min-width: 768px) {
  .gallery-master-heading { right: 12vw; }
}

.gallery-title {
  font-size: 3.75rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--foreground);
  line-height: 1;
}
@media (min-width: 1024px) {
  .gallery-title { font-size: 6rem; }
}

/* Parallax circles container */
.parallax-circles-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.gallery-parallax-circle {
  position: absolute;
  background-color: var(--accent);
  border-radius: 50%;
}
.parallax-circle-1 { top: -60vh; left: 2%;  width: 10vw; height: 10vw; z-index: 50; background-color: #00F0FF; }
.parallax-circle-2 { top: -100vh; left: 15%; width: 8vw;  height: 8vw;  z-index: 30; background-color: #FF003C; }
.parallax-circle-3 { top: -80vh; left: 28%; width: 12vw; height: 12vw; z-index: 50; background-color: #B026FF; }
.parallax-circle-4 { top: -110vh; left: 45%; width: 15vw; height: 15vw; z-index: 10; background-color: #00FF66; }
.parallax-circle-5 { top: -70vh; left: 65%; width: 8vw;  height: 8vw;  z-index: 10; background-color: #FF9900; }
.parallax-circle-6 { top: -120vh; left: 78%; width: 10vw; height: 10vw; z-index: 30; background-color: #FF00FF; }

/* Transition circle */
.transition-circle {
  position: absolute;
  bottom: 100px;
  left: 50%;
  width: 10vw;
  height: 10vw;
  background-color: var(--accent);
  border-radius: 50%;
  z-index: 50;
}

/* Gallery masonry grid */
.gallery-grid-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 180vh;
  pointer-events: none;
  transform: translateY(100vh);
  z-index: 40;
}

.gallery-img {
  position: absolute;
  object-fit: cover;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
  pointer-events: auto;
}
/* Individual positions */
.gallery-img-1 { top: 20vh;  left: 6%;  width: 24%; min-width: 200px; aspect-ratio: 1/1; }
.gallery-img-2 { top: 80vh;  left: 8%;  width: 22%; min-width: 180px; aspect-ratio: 1/1; }
.gallery-img-3 { top: 5vh;   left: 36%; width: 24%; min-width: 160px; aspect-ratio: 4/3; }
.gallery-img-4 { top: 90vh;  left: 35%; width: 32%; min-width: 180px; aspect-ratio: 4/3; }
.gallery-img-5 { top: 40vh;  right: 6%; width: 24%; min-width: 200px; aspect-ratio: 3/4; }

/* ============================================================
   CONTACT OVERLAY
   ============================================================ */
.contact-overlay {
  opacity: 0;
  visibility: hidden;
}

.contact-dish-img {
  position: absolute;
  bottom: 15vh;
  left: 8vw;
  width: 35vw;
  height: auto;
  opacity: 0;
  pointer-events: auto;
  z-index: 50;
  filter: drop-shadow(0 25px 50px rgba(0,0,0,0.25));
}

.contact-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  max-width: var(--max-w);
  height: 100%;
  padding: 2rem;
  pointer-events: none;
  margin: 0 auto;
  z-index: 20;
}
@media (min-width: 768px) {
  .contact-inner { padding: 3rem; }
}

.contact-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  transform: translateY(50px);
  pointer-events: auto;
}
@media (min-width: 768px)  { .contact-content { width: 50%; } }
@media (min-width: 1024px) { .contact-content { width: 41.666%; } } /* lg:w-5/12 */

.contact-title {
  font-size: 3rem;       /* text-5xl */
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--foreground);
  margin-bottom: 2rem;   /* mb-8 */
  line-height: 1.1;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;           /* space-y-6 */
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
  font-weight: 500;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;             /* space-x-4 */
}

.contact-icon {
  width: 1.5rem; height: 1.5rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.25rem;
}

.contact-label {
  font-weight: 700;
  color: var(--foreground);
}

.contact-value { /* plain text row */ }

.contact-value--muted {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
}

.contact-cta-wrap {
  margin-top: 2.5rem;  /* mt-10 */
}

/* ============================================================
   SCROLL WRAPPER
   ============================================================ */
.scroll-wrapper {
  position: relative;
  width: 100%;
  overflow-x: hidden;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  z-index: 10;
}

.hero-content {
  position: fixed;
  inset: 0;
  display: flex;
  min-height: 100vh;
  width: 100%;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;         /* p-8 */
  z-index: 10;
}
@media (min-width: 768px) {
  .hero-content { padding: 3rem; } /* md:p-12 */
}

.hero-spacer {
  height: 2rem;          /* h-8 */
  width: 100%;
}
@media (min-width: 768px) {
  .hero-spacer { height: 3rem; } /* md:h-12 */
}

/* Hero main 3-col grid */
.hero-main {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;             /* gap-12 */
  width: 100%;
  max-width: var(--max-w);
  margin: auto;
  flex-grow: 1;
}
@media (min-width: 768px) {
  .hero-main {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;           /* md:gap-4 */
  }
}

/* Hero columns shared */
.hero-col { position: relative; }

.hero-col--left {
  z-index: 20;
  order: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: auto;
}
@media (min-width: 768px) {
  .hero-col--left {
    order: 1;
    align-items: flex-start;
    text-align: left;
  }
}

.hero-col--center {
  order: 1;
  display: flex;
  height: 350px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  cursor: pointer;
  user-select: none;
}
@media (min-width: 768px) {
  .hero-col--center {
    order: 2;
    height: 100%;
  }
}

.hero-col--right {
  z-index: 20;
  order: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
}
@media (min-width: 768px) {
  .hero-col--right {
    align-items: flex-start;
    text-align: left;
  }
}
@media (min-width: 1024px) {
  .hero-col--right {
    margin-left: -4rem; /* pull text deeper into circle */
  }
}

/* Left col body text */
.hero-body-text {
  max-width: 20rem;      /* max-w-xs */
  font-size: 0.875rem;
  line-height: 1.625;
  color: var(--foreground-muted);
}

.hero-cta { margin-top: 1rem; } /* mt-4 */

/* Center column */
.hero-circle-container {
  perspective: 1000px;
}

/* Hero tagline */
.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.125rem;
  color: var(--foreground-muted);
  line-height: 1.6;
  letter-spacing: 0.01em;
  transform: translateY(100px);
}

.hero-tagline-el {
  opacity: 0;
  text-align: center;
  pointer-events: none;
}

/* Pizza image */
.pizza-image {
  position: relative;
  margin-top: 50px;
  z-index: 10;
  height: auto;
  width: 14rem;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.18));
  opacity: 0;
  transform: translateY(50px) scale(1.25);
  pointer-events: none;
  transform-style: preserve-3d;
}
@media (min-width: 768px)  { .pizza-image { width: 18rem; } }
@media (min-width: 1024px) { .pizza-image { width: 22rem; } }

/* Right col heading */
.hero-rule {
  display: none;
  width: 40px;
  height: 1px;
  background-color: var(--accent);
  margin-bottom: 0.5rem; /* pull line closer to text */
}
@media (min-width: 768px) {
  .hero-rule { 
    display: block; 
    margin-left: 4.25rem; /* optical alignment + shift */
  }
}
@media (min-width: 1024px) {
  .hero-rule {
    margin-left: 4.2rem; /* shift right to match San Castello indent */
  }
}

.hero-heading {
  font-size: 3.75rem;    /* text-6xl */
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--foreground);
  line-height: 1;
}
@media (min-width: 768px)  { .hero-heading { font-size: 4.5rem; } }  /* md:text-7xl */
@media (min-width: 1024px) { .hero-heading { font-size: 6rem;   } }  /* lg:text-8xl */

.hero-heading__san { 
  display: block; 
}
@media (min-width: 768px) {
  .hero-heading__san { margin-left: 4rem; }
}
@media (min-width: 1024px) {
  .hero-heading__san { margin-left: 3.5rem; }
}

.hero-heading__castello { display: block; color: var(--accent); font-weight: 900;}
@media (min-width: 768px) {
  .hero-heading__castello { transform: translateX(4.2rem); }
}
@media (min-width: 1024px) {
  .hero-heading__castello { transform: translateX(3.6rem); }
}

.hero-est {
  margin-top: 0.75rem;   /* mt-3 */
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: color-mix(in srgb, var(--foreground) 30%, transparent);
  display: none;
}
@media (min-width: 768px) {
  .hero-est { display: block; transform: translateX(4rem); }
}
@media (min-width: 1024px) {
  .hero-est { transform: translateX(4rem); }
}

/* ============================================================
   FOOTER BAR (inside hero-content)
   ============================================================ */
.site-footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  z-index: 30;
  opacity: 0;
  transform: translateY(20px);
}

.social-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;          /* space-x-5 */
}

.social-link {
  color: color-mix(in srgb, var(--foreground) 50%, transparent);
  transition: color 0.3s ease, transform 0.3s ease;
}
.social-link:hover {
  color: var(--hover-color, var(--accent));
  transform: scale(1.1);
}

.social-icon {
  width: 1.25rem; height: 1.25rem; /* h-5 w-5 */
}

.footer-location {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  color: color-mix(in srgb, var(--foreground) 80%, transparent);
}

.footer-location__icon {
  width: 1rem; height: 1rem;
  margin-right: 0.25rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* ============================================================
   SECTION EYEBROW (shared small uppercase label)
   ============================================================ */
.section-eyebrow {
  font-size: 0.75rem;    /* text-xs */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
  margin-bottom: 1rem;   /* default; overridden where needed */
}

/* menu heading eyebrow has more bottom margin */
.menu-master-heading .section-eyebrow { margin-bottom: 1.5rem; }

/* about eyebrow no bottom margin */
.about-content .section-eyebrow { margin-bottom: 0; }

/* contact eyebrow */
.contact-content .section-eyebrow { margin-bottom: 1rem; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section {
  --accent: #B026FF;
  position: absolute;
  inset: 0;
  z-index: 20;
  width: 100%;
  height: 100%;
  min-height: 100vh;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-sandwich-image {
  max-width: 19rem;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 25px 35px rgba(0, 0, 0, 0.22));
  pointer-events: none;
  z-index: 25;
  transform-style: preserve-3d;
  /* initial GSAP state */
  opacity: 0;
  transform: scale(0.5);
  position: absolute;
}
@media (min-width: 768px)  { .about-sandwich-image { max-width: 24rem; } }
@media (min-width: 1024px) { .about-sandwich-image { max-width: 29rem; } }

.about-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  width: 100%;
  max-width: var(--max-w);
  padding: 2rem;
  pointer-events: none;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    padding: 3rem;
  }
}

.about-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;           /* space-y-6 */
  opacity: 0;
  transform: translateY(50px);
}

.about-heading {
  font-size: 2.25rem;    /* text-4xl */
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--foreground);
  line-height: 1.25;
}
@media (min-width: 768px)  { .about-heading { font-size: 3rem;    } } /* md:text-5xl */
@media (min-width: 1024px) { .about-heading { font-size: 3.75rem; } } /* lg:text-6xl */

.about-body {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--foreground-muted);
}

.about-cta-wrap {
  padding-top: 0.5rem;   /* pt-2 */
  pointer-events: auto;
}

.about-accent-col {
  position: relative;
  display: flex;
  height: 100%;
  min-height: 250px;
  align-items: center;
  justify-content: center;
}
@media (min-width: 768px) { .about-accent-col { min-height: 100%; } }

.about-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: absolute;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
}

.about-badge__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--foreground) 20%, transparent);
  margin-bottom: 0.5rem;
}

.about-badge__year {
  font-size: 4.5rem;     /* text-7xl */
  font-weight: 900;
  color: var(--foreground);
  letter-spacing: -0.04em;
}
@media (min-width: 768px)  { .about-badge__year { font-size: 6rem;  } }  /* md:text-8xl */
@media (min-width: 1024px) { .about-badge__year { font-size: 8rem;  } }  /* lg:text-9xl */

/* ============================================================
   GALLERY ANCHOR
   ============================================================ */
.gallery-anchor {
  position: relative;
  width: 100%;
  height: 10vh;
}

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: color-mix(in srgb, var(--background) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--transition-smooth), visibility 0.4s var(--transition-smooth);
}
@media (min-width: 768px) {
  .mobile-menu-overlay { padding: 3rem; }
}

.mobile-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
}

.mobile-menu-logo {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.mobile-close-btn {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  outline: none;
}

.mobile-close-icon {
  width: 1.75rem; height: 1.75rem;
  color: var(--foreground);
  transition: color 0.3s ease;
}
.mobile-close-btn:hover .mobile-close-icon { color: var(--hover-color, var(--accent)); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  text-align: center;
  margin: auto 0;
}

.mobile-nav-link {
  font-size: 1.5rem;     /* text-2xl */
  font-weight: 800;
  color: var(--foreground);
  letter-spacing: 0.025em;
  transition: color 0.2s ease;
}
.mobile-nav-link:hover { color: var(--hover-color, var(--accent)); }

.mobile-menu-footer {
  margin: 0 auto;
  text-align: center;
}

.mobile-menu-location {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

/* Vibrant accent colors for each menu item */
.menu-cat-1 .cat-number { color: #00F0FF; } /* Cyan */
.menu-cat-2 .cat-number { color: #FF003C; } /* Red */
.menu-cat-3 .cat-number { color: #B026FF; } /* Purple */
.menu-cat-4 .cat-number { color: #00FF66; } /* Green */

.menu-cat-1 .cat-heading { color: #FAFAFA; text-shadow: 0 0 15px rgba(0,240,255,0.4); }
.menu-cat-2 .cat-heading { color: #FAFAFA; text-shadow: 0 0 15px rgba(255,0,60,0.4); }
.menu-cat-3 .cat-heading { color: #FAFAFA; text-shadow: 0 0 15px rgba(176,38,255,0.4); }
.menu-cat-4 .cat-heading { color: #FAFAFA; text-shadow: 0 0 15px rgba(0,255,102,0.4); }

/* Dynamic hover colors for links */
.desktop-nav .nav-link:nth-child(1) { --hover-color: #00F0FF; }
.desktop-nav .nav-link:nth-child(2) { --hover-color: #FF003C; }
.desktop-nav .nav-link:nth-child(3) { --hover-color: #B026FF; }
.desktop-nav .nav-link:nth-child(4) { --hover-color: #00FF66; }
.desktop-nav .nav-link:nth-child(5) { --hover-color: #FF9900; }

.mobile-nav .mobile-nav-link:nth-child(1) { --hover-color: #00F0FF; }
.mobile-nav .mobile-nav-link:nth-child(2) { --hover-color: #FF003C; }
.mobile-nav .mobile-nav-link:nth-child(3) { --hover-color: #B026FF; }
.mobile-nav .mobile-nav-link:nth-child(4) { --hover-color: #00FF66; }
.mobile-nav .mobile-nav-link:nth-child(5) { --hover-color: #FF9900; }

.social-links .social-link:nth-child(1) { --hover-color: #00F0FF; }
.social-links .social-link:nth-child(2) { --hover-color: #FF003C; }
.social-links .social-link:nth-child(3) { --hover-color: #B026FF; }
.social-links .social-link:nth-child(4) { --hover-color: #00FF66; }