/* -------------------------------------------------
   GLOBAL RESET & BASE
   ------------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    background:#0A0A0A;
    color:#F0F0F0;
    font-family:'Roboto', 'Helvetica Neue', sans-serif;
    line-height:1.7;
    overflow-x:hidden;
}
/* -------------------------------------------------
   NAVIGATION
   ------------------------------------------------- */
header {
    background:rgba(10,10,10,.92);
    padding:1rem 2rem;
    position:fixed;
    width:100%;
    top:0;
    z-index:1000;
    box-shadow:0 4px 15px rgba(0,0,0,.7);
}
nav ul {
    list-style:none;
    display:flex;
    justify-content:center;
    gap:2rem;
    flex-wrap:wrap;
}
nav ul li a {
    color:#FFCC00;
    text-decoration:none;
    font-weight:bold;
    text-transform:uppercase;
    font-size:.9rem;
    padding:.5rem 1rem;
    transition:color .3s;
}
nav ul li a:hover { color:#FFD633; }
/* -------------------------------------------------
   HERO — FIXED FOR ALL PAGES
   ------------------------------------------------- */
.hero {
    position:relative;
    height:100vh;
    background:center/cover no-repeat fixed;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:0 2rem;
}

/* DEFAULT HERO IMAGE (for index.html) */
.hero {
    background-image:url('../assets/image/full_setup.JPG');
}

/* PAGE-SPECIFIC HERO BACKGROUNDS */
body.photography .hero { background-image:url('../assets/image/fujifilm_desk.JPG'); }
body.gear .hero { background-image:url('../assets/image/gear-shot.jpg'); }
body.benchmarks .hero { background-image:url('../assets/image/tesla.jpg'); }
body.youtube .hero { background-image:url('../assets/image/full_setup.JPG'); }

/* BENCHMARKS HERO SPECIFIC */
body.benchmarks .hero {
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.hero::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom,rgba(10,10,10,.75),rgba(10,10,10,.95));
    z-index:1;
}
.hero-text { position:relative; z-index:2; }
.hero .title {
    font-family:'Orbitron', sans-serif;
    font-weight:900;
    font-size:5.5rem;
    letter-spacing:2px;
    color:#FFCC00;
    text-shadow:0 4px 12px rgba(0,0,0,.8);
    margin-bottom:.4rem;
}
.hero .subtitle {
    font-size:1.6rem;
    color:#EEEEEE;
    font-weight:300;
    text-shadow:0 2px 8px rgba(0,0,0,.7);
}

/* MOBILE: CONSOLIDATED HERO FIX */
@media (max-width: 768px) {
    .hero {
        background-size: cover !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-position: center !important;
    }
    
    /* TESLA EXCEPTION - SHOW FULL CAR */
    body.benchmarks .hero {
        background-size: contain !important;
        background-color: #000 !important;
    }
    
    .hero .title { font-size: 3.2rem; }
    .hero .subtitle { font-size: 1.2rem; }
    
    /* Other mobile styles */
    .bio img {width:160px;height:160px;}
    .bio p {font-size:1rem;}
    .bio-section,.contact-section {padding:4rem 1.5rem 3rem;}
    nav ul {gap:.8rem;font-size:.75rem;}
    .contact-section {padding-top:100px !important;}
    .video-hero .seam-text {font-size:1.8rem; bottom:2rem;}
    .desktop-showcase {padding:3rem 1.5rem;}
    .desktop-img {border-width:2px; border-radius:8px;}
    .lab-intro {padding:3rem 1.5rem;}
    .lab-grid {padding:2rem 1.5rem;}
    .lab-item img {height:160px;}
}

@media (max-width:480px){
    .hero .title {font-size:2.6rem;}
    .hero .subtitle {font-size:1rem;}
    .bio img {width:140px;height:140px;}
    .contact-section textarea {min-height:120px;}
    .video-hero .seam-text {font-size:1.4rem; bottom:1.5rem;}
}

/* -------------------------------------------------
   VIDEO HERO + CTA (seam text)
   ------------------------------------------------- */
.video-hero {
    position:relative;
    width:100%;
    height:80vh;
    overflow:hidden;
    background:#0A0A0A;
}
.video-hero video {
    position:absolute;
    top:50%; left:50%;
    width:100%; height:auto;
    max-width:none;
    transform:translate(-50%,-50%);
    z-index:1;
    object-fit:contain;
    filter:brightness(0.9) contrast(1.1);
}
.video-hero .seam-text {
    position:absolute;
    bottom:2.5rem;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    color:#FFCC00;
    font-family:'Orbitron', sans-serif;
    font-size:2.2rem;
    font-weight:900;
    letter-spacing:1.5px;
    text-shadow:0 3px 10px rgba(0,0,0,.9);
    text-decoration:none;
    white-space:nowrap;
    padding:.5rem 1rem;
    transition:all .3s ease;
}
.video-hero .seam-text:hover {
    color:#FFD633;
    transform:translateX(-50%) scale(1.05);
    text-shadow:0 5px 15px rgba(0,0,0,.95);
}
/* -------------------------------------------------
   DESKTOP SHOWCASE (49-inch monitor)
   ------------------------------------------------- */
.desktop-showcase {
    padding:4rem 2rem;
    background:#0A0A0A;
    text-align:center;
}
.desktop-showcase .container {
    max-width:1400px;
    margin:0 auto;
}
.desktop-img {
    width:100%;
    height:auto;
    max-height:600px;
    object-fit:contain;
    border:3px solid #FFCC00;
    border-radius:12px;
    box-shadow:0 15px 40px rgba(255,204,0,.2);
    transition:transform .3s ease, box-shadow .3s ease;
}
.desktop-img:hover {
    transform:scale(1.02);
    box-shadow:0 20px 50px rgba(255,204,0,.3);
}
/* -------------------------------------------------
   BIO SECTION (used on About)
   ------------------------------------------------- */
.bio-section { padding:6rem 2rem 4rem; text-align:center; background:#0A0A0A; }
.bio { max-width:800px; margin:auto; }
.bio img {
    width:210px; height:210px;
    border-radius:50%;
    object-fit:cover;
    border:4px solid #FFCC00;
    margin:2.5rem auto; display:block;
    box-shadow:0 10px 25px rgba(255,204,0,.35);
    transition:.3s;
}
.bio img:hover { transform:scale(1.06); box-shadow:0 15px 35px rgba(255,204,0,.5); }
.bio p { font-size:1.18rem; color:#DDDDDD; margin-bottom:2.2rem; padding:0 1.5rem; line-height:1.8; }
.bio a { color:#FFCC00; text-decoration:none; font-weight:bold; border-bottom:1px dashed #FFCC00; transition:.2s; }
.bio a:hover { color:#FFD633; border-bottom:1px solid #FFD633; }
.largo-caption { font-style:italic; color:#AAAAAA; margin-top:.6rem; font-size:1rem; }
/* -------------------------------------------------
   CONTACT SECTION
   ------------------------------------------------- */
.contact-section {
    padding:6rem 2rem;
    text-align:center;
    max-width:600px;
    margin:auto;
    padding-top:120px !important;
}
.contact-section h2 { font-family:'Orbitron', sans-serif; color:#FFCC00; margin-bottom:1.5rem; }
.contact-section form { display:flex; flex-direction:column; gap:1rem; margin:2rem 0; }
.contact-section input,
.contact-section textarea {
    padding:1rem;
    background:#222;
    border:1px solid #444;
    color:#FFF;
    border-radius:4px;
    font-size:1rem;
}
.contact-section textarea { min-height:160px; resize:vertical; }
.contact-section button {
    background:#FFCC00;
    color:#0A0A0A;
    padding:1rem;
    border:none;
    font-weight:bold;
    cursor:pointer;
    border-radius:4px;
    transition:.3s;
}
.contact-section button:hover { background:#FFD633; }
.video-wrapper { margin:3rem auto; max-width:800px; }
.video-wrapper video { width:100%; border:4px solid #FFCC00; border-radius:8px; box-shadow:0 10px 30px rgba(255,204,0,.3); }
.contact-section ol { text-align:left; margin:2rem auto; max-width:400px; color:#AAA; }
.contact-section ol li { margin-bottom:.8rem; }
.contact-section ol a { color:#FFCC00; text-decoration:none; }
.contact-section ol a:hover { color:#FFD633; text-decoration:underline; }
/* -------------------------------------------------
   FOOTER
   ------------------------------------------------- */
footer {
    text-align:center;
    padding:2.5rem;
    background:#0A0A0A;
    color:#666;
    font-size:.9rem;
    border-top:1px solid #222;
}
/* -------------------------------------------------
   LAB PAGE
   ------------------------------------------------- */
.lab-intro { padding:4rem 2rem; text-align:center; background:#0A0A0A; }
.lab-intro .container { max-width:900px; margin:0 auto; }
.lab-intro p { font-size:1.2rem; color:#DDDDDD; line-height:1.8; }
.lab-grid { padding:3rem 2rem; background:#0A0A0A; }
.lab-grid .container {
    max-width:1100px;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
    gap:2rem;
}
.lab-item {
    background:#111;
    border:1px solid #222;
    border-radius:8px;
    overflow:hidden;
    transition:transform .3s, box-shadow .3s;
}
.lab-item:hover {
    transform:translateY(-8px);
    box-shadow:0 12px 30px rgba(255,204,0,.2);
}
.lab-item img {
    width:100%;
    height:240px;
    object-fit:cover;
    border-bottom:3px solid #FFCC00;
    cursor:zoom-in;
}
.lab-item h3 {
    font-family:'Orbitron', sans-serif;
    color:#FFCC00;
    font-size:1.1rem;
    padding:1rem 1rem .5rem;
    margin:0;
}
.lab-item p {
    padding:0 1rem 1.5rem;
    font-size:.95rem;
    color:#CCCCCC;
    line-height:1.6;
}
.lab-item p strong { color:#FFCC00; }
/* Wide CapCut image */
.wide-item { grid-column:1 / -1; margin:2rem 0; }
.wide-item img {
    width:100%;
    height:auto;
    max-height:420px;
    object-fit:contain;
    background:#111;
    border:3px solid #FFCC00;
    border-radius:8px;
    cursor:zoom-in;
}
@media (min-width:992px) { .wide-item { grid-column:span 2; } }
/* -------------------------------------------------
   LIGHTBOX
   ------------------------------------------------- */
.lightbox {
    display:none;
    position:fixed;
    z-index:10000;
    left:0; top:0;
    width:100%; height:100%;
    background:rgba(0,0,0,.95);
    justify-content:center;
    align-items:center;
    padding:2rem;
    box-sizing:border-box;
}
.lightbox-content {
    max-width:90%;
    max-height:90%;
    border:4px solid #FFCC00;
    border-radius:8px;
    box-shadow:0 0 30px rgba(255,204,0,.5);
}
.close {
    position:absolute;
    top:20px; right:30px;
    color:#FFF;
    font-size:3rem;
    font-weight:bold;
    cursor:pointer;
    text-shadow:0 0 10px #000;
}
.close:hover { color:#FFCC00; }
/* -------------------------------------------------
   CONTACT VIDEO PLAY BUTTON
   ------------------------------------------------- */
.video-wrapper {
    position:relative;
    margin:3rem auto;
    max-width:800px;
    border:4px solid #FFCC00;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 15px 40px rgba(255,204,0,.3);
    cursor:pointer;
}
.video-overlay {
    position:absolute;
    top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,.6);
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    transition:opacity .3s;
    color:#FFF;
    text-align:center;
}
.play-button {
    font-size:4rem;
    margin-bottom:1rem;
    text-shadow:0 0 20px #000;
    transition:transform .2s;
}
.play-button:hover { transform:scale(1.2); }
.video-overlay p {
    font-family:'Orbitron', sans-serif;
    font-size:1.4rem;
    color:#FFCC00;
    margin:0;
}
/* -------------------------------------------------
   CONFIRMATION MESSAGE
   ------------------------------------------------- */
.confirmation {
    text-align:center;
    padding:3rem 2rem;
    background:#0A0A0A;
    border:3px solid #FFCC00;
    border-radius:12px;
    max-width:600px;
    margin:2rem auto;
    box-shadow:0 0 30px rgba(255,204,0,.2);
}
.confirmation h3 {
    font-family:'Orbitron', sans-serif;
    color:#FFCC00;
    font-size:2rem;
    margin-bottom:1rem;
}
.confirmation p { color:#DDD; font-size:1.1rem; line-height:1.6; }
.confirmation strong { color:#FFCC00; }
/* -------------------------------------------------
   ENGINEERING PAGE
   ------------------------------------------------- */
.engineering-intro {
    padding: 4rem 2rem;
    background: #0A0A0A;
    text-align: center;
}
.engineering-intro .container {
    max-width: 900px;
    margin: 0 auto;
}
.engineering-intro p {
    font-size: 1.25rem;
    color: #DDDDDD;
    line-height: 1.9;
    text-align: left;
}
.first-letter {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: 3.5rem;
    color: #FFCC00;
    float: left;
    margin-right: 0.4rem;
    line-height: 1;
    text-shadow: 0 3px 8px rgba(0,0,0,.8);
}
/* COMPONENTS GRID */
.components-grid {
    padding: 3rem 2rem;
    background: #0A0A0A;
}
.components-grid .container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}
.component-card {
    background: #111;
    border: 1px solid #222;
    border-radius: 12px;
    overflow: hidden;
    transition: all .3s ease;
    box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.component-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 35px rgba(255,204,0,.15);
    border-color: #FFCC00;
}
.component-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 3px solid #FFCC00;
    cursor: zoom-in;
}
.card-content {
    padding: 1.2rem;
}
.card-content h3 {
    font-family: 'Orbitron', sans-serif;
    color: #FFCC00;
    font-size: 1.3rem;
    margin-bottom: .5rem;
}
.card-content p {
    font-size: .95rem;
    color: #CCCCCC;
    margin: .3rem 0;
    line-height: 1.5;
}
.card-content p strong {
    color: #FFCC00;
}
.wide {
    grid-column: 1 / -1;
}
.wide .component-img {
    height: 220px;
}
/* -------------------------------------------------
   PHOTOGRAPHY PAGE
   ------------------------------------------------- */
/* Video Hero (Drone Footage) */
.video-hero {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
    background: #0A0A0A;
}
.video-hero video {
    position: absolute;
    top: 50%; left: 50%;
    width: 100%; height: auto;
    max-width: none;
    transform: translate(-50%, -50%);
    z-index: 1;
    object-fit: cover;
    filter: brightness(0.95) contrast(1.08);
}
.video-overlay-text {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #AAAAAA;
    font-style: italic;
    font-size: 1rem;
    text-shadow: 0 2px 6px rgba(0,0,0,.8);
    white-space: nowrap;
}
.photography-intro {
    padding: 4rem 2rem;
    background: #0A0A0A;
    text-align: center;
}
.photography-intro .container {
    max-width: 900px;
    margin: 0 auto;
}
.photography-intro p {
    font-size: 1.25rem;
    color: #DDDDDD;
    line-height: 1.9;
    text-align: left;
    margin-bottom: 1.5rem;
}
.photo-gallery {
    padding: 3rem 2rem;
    background: #0A0A0A;
    min-height: 40vh;
}
/* -------------------------------------------------
   YOUTUBE PAGE STYLES
   ------------------------------------------------- */
/* YouTube-specific styling for the CTA button */
.youtube-cta {
    display: inline-block;
    background: #FF0000;
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-weight: bold;
    transition: all 0.3s ease;
    margin-top: 1rem;
}

.youtube-cta:hover {
    background: #CC0000;
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(255, 0, 0, 0.3);
}

/* Fix for oversized YouTube logo PNG */
.component-card img[src*="Twn2rbologo"] {
    height: auto;
    max-height: 180px;
    object-fit: contain;
    background: #111;
    padding: 10px;
}

/* Special wide card for YouTube branding */
.youtube-brand-card {
    background: linear-gradient(135deg, #111 0%, #222 100%);
    text-align: center;
    border: 2px solid #FF0000;
}

.youtube-brand-card h3 {
    color: #FF0000;
    font-size: 2rem;
}

/* -------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   ------------------------------------------------- */
@media (max-width: 768px) {
    .engineering-intro p { font-size: 1.1rem; }
    .first-letter { font-size: 2.8rem; }
    .component-img { height: 160px; }
    .wide .component-img { height: 180px; }
    .card-content h3 { font-size: 1.2rem; }
    .photography-intro p { font-size: 1.1rem; }
    
    /* YouTube page mobile adjustments */
    .youtube-brand-card h3 { font-size: 1.6rem; }
    .youtube-cta { padding: 0.8rem 1.5rem; font-size: 0.9rem; }
    .component-card img[src*="Twn2rbologo"] { max-height: 160px; padding: 8px; }
}

@media (max-width: 768px) {
    .photography-intro p { font-size: 1.1rem; }
    .first-letter { font-size: 2.8rem; }
    .video-hero { height: 60vh; }
    .video-overlay-text { font-size: 0.9rem; bottom: 1.5rem; }
}