/*--------------------------------------------------------------
1. RESET & BASE
--------------------------------------------------------------*/


/* Base typography & background */
body {
  font-family: 'Inter', sans-serif;
  background: #232323;
  color: #fff;
}

section {
  max-width: 100vw;
  overflow-x: hidden;
   
}



section[id] {
  scroll-padding-top: 72px !important;
}


/*--------------------------------------------------------------
2. COLOR & TEXT UTILITIES
--------------------------------------------------------------*/

.text-yellow-600 {
  /* reset Tailwind’s opacity var, then assign your hex */
  --tw-text-opacity: 1 !important;
  color: #E7E427 !important;
      /* webkit-only stroke (Chrome, Safari, Edge) */
      -webkit-text-stroke: 0.2px #000;      
  /* Firefox now supports the unprefixed version too */
  text-stroke: 0.1x #000;              
  /* fallback for any browser via 4‑way shadow */
  text-shadow:
  -0.3px -0.3px 0 #000,
   0.3px -0.3px 0 #000,
  -0.3px  0.3px 0 #000,
   0.3px  0.3px 0 #000;
  }


/*--------------------------------------------------------------
3. NAVIGATION LINK UNDERLINE ANIMATION
--------------------------------------------------------------*/
nav a {
  position: relative; /* FIXED */
  transition: color 0.3s ease;
  display: inline-block;
  max-width: 100%;
  overflow-x: hidden;
  padding-bottom: 1px;
}

nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 0;
  margin: auto;
  height: 2px;
  background-color: #facc15;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}

nav a:hover::after {

  width: 100%;
  transform: scaleX(1);
  transform-origin: bottom left;
}


/*--------------------------------------------------------------
4. FEATURE IMAGE (PARALLAX BACKDROP)
--------------------------------------------------------------*/

.feature {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 50%; /* aspect ratio trick */
  background: URL(images/ladder.jpg)
              center center no-repeat;
  background-size: 100%;
  box-shadow: inset 0 -50px 20px -20px #232323;
  z-index: 0;
  overflow: hidden;    /* important */
  pointer-events: none;

  
}

/* Overlay layer for non‑WebKit browsers */
.opaque {
  position: absolute;
  inset: 0;
  background: #d2d6f1;
  opacity: 0;
  pointer-events: none;
}

/* hide on old IE */
.lt-ie9 .opaque {
  display: none;
}


/*--------------------------------------------------------------
5. CONTENT LAYOUT
--------------------------------------------------------------*/
/* .content {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  margin-top: 50%;          
  /* push below the feature (maintains 2:1) */



/*--------------------------------------------------------------
6. LIGHTBOX
--------------------------------------------------------------*/

/* in your style.css */
.card-panel img {
  transition: transform 0.54s ease;
}
.card-panel:hover img {
  transform: scale(1.15);
}
/*--------------------------------------------------------------
7. MOBILE FIXES
--------------------------------------------------------------*/
@media (max-width: 768px) {
  /* Make lightbox image scale better on small viewports */
  #lightbox img {
    max-width: 95vw;
    max-height: 80vh;
  }
}
/*------------------------------------
8. ABOUT‑SECTION TEXT ALIGN OVERRIDE
------------------------------------*/
#about {
  text-align: left;          /* paragraphs & headings flush left   */
           /* optional: keep line‑length comfy    */
  margin-left: auto;         /* center the block itself             */
  margin-right: auto;        /* while the text inside stays left‑aligned */
}

/*------------------------------------
9. CARD‑PANEL STYLE (shared utility)
------------------------------------*/
.card-panel {
  background: #fff;                 /* white panel */
  color: #1C1C1C;                   /* dark text   */
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  max-width: 900px;                 /* comfy line‑length */
  margin: 0 auto;                   /* center the block  */
}