:root{
  --bg:#030605;
  --green:#b8f6d8;
  --green2:#7fd3aa;
  --muted:rgba(184,246,216,.65);
  --line:rgba(184,246,216,.22);
  --white:#f4fff8;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--white);font-family:Arial, Helvetica, sans-serif;letter-spacing:.08em}
a{color:inherit;text-decoration:none}
button{font:inherit}

.header{position:fixed;z-index:20;top:0;left:0;width:100%;height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;pointer-events:none}
.brand,.nav,.socials,.menu-toggle{pointer-events:auto}
.brand{font-size:26px;font-weight:700;letter-spacing:.48em;color:var(--green);text-shadow:0 0 18px rgba(127,211,170,.65);transition:.25s ease}
.brand:hover{filter:brightness(1.25);text-shadow:0 0 14px rgba(184,246,216,.9),0 0 32px rgba(127,211,170,.55)}
.nav{display:flex;gap:54px;color:var(--green);font-size:14px;text-transform:uppercase}
.nav a,.socials a{transition:.25s ease}
.nav a:hover,.socials a:hover{filter:brightness(1.25);text-shadow:0 0 12px var(--green)}
.menu-toggle{display:none;background:none;border:0;color:var(--green);font-size:26px}

.page{min-height:100vh;padding:128px 5vw 72px}

/* HOME */
.home{height:100vh;min-height:720px;position:relative;overflow:hidden;background:#010302}
.home::before{content:"";position:absolute;inset:0;background-image:url('../assets/img/home-hero.png');background-size:cover;background-position:center;background-repeat:no-repeat;filter:saturate(.98) contrast(1.02) brightness(.98);transform:scale(.92);transform-origin:center;animation:heroFlicker 4.2s ease-in-out infinite}
.home::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 33%,rgba(184,246,216,.30) 0 3.5%,rgba(127,211,170,.18) 4% 8%,rgba(127,211,170,.07) 9% 15%,transparent 22%),radial-gradient(circle at 50% 56%,transparent 0 30%,rgba(0,0,0,.08) 46%,rgba(0,0,0,.55) 100%);mix-blend-mode:screen;opacity:.62;animation:exitLightPulse 4.2s ease-in-out infinite}

@keyframes heroFlicker{
  0%,100%{filter:saturate(.98) contrast(1.02) brightness(.96)}
  15%{filter:saturate(1.02) contrast(1.03) brightness(1.02)}
  19%{filter:saturate(.98) contrast(1.02) brightness(.94)}
  24%{filter:saturate(1.05) contrast(1.04) brightness(1.04)}
  52%{filter:saturate(1.00) contrast(1.03) brightness(.98)}
  70%{filter:saturate(1.04) contrast(1.04) brightness(1.03)}
}
@keyframes exitLightPulse{
  0%,100%{opacity:.50;transform:scale(1)}
  15%{opacity:.76;transform:scale(1.012)}
  19%{opacity:.42;transform:scale(.995)}
  24%{opacity:.84;transform:scale(1.018)}
  52%{opacity:.60;transform:scale(1)}
  70%{opacity:.78;transform:scale(1.01)}
}

/* Real button. Background image has no button in V7. */
.view-btn{position:absolute;z-index:5;left:7.2vw;top:61.5vh;border:1px solid var(--green2);padding:17px 30px;color:var(--green);font-size:14px;letter-spacing:.18em;background:rgba(0,0,0,.13);box-shadow:0 0 16px rgba(127,211,170,.15);transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,text-shadow .25s ease,background .25s ease,transform .25s ease}
.view-btn span{display:inline-block;margin-left:18px;transition:transform .25s ease}
.view-btn:hover{color:#eafff3;border-color:#b8f6d8;background:rgba(184,246,216,.04);box-shadow:0 0 18px rgba(184,246,216,.34),0 0 42px rgba(127,211,170,.22);text-shadow:0 0 8px rgba(184,246,216,.9),0 0 22px rgba(184,246,216,.45);transform:translateY(-2px)}
.view-btn:hover span{transform:translateX(6px)}
.view-btn::before,.view-btn::after{content:none!important;display:none!important}

.socials{position:fixed;right:5vw;bottom:38px;z-index:30;display:flex;gap:24px}
.socials a{width:42px;height:42px;border:1px solid var(--green2);border-radius:11px;display:grid;place-items:center;color:var(--green);font-size:13px;background:rgba(0,0,0,.18)}
.socials a:hover{border-color:#b8f6d8;box-shadow:0 0 14px rgba(184,246,216,.34),0 0 32px rgba(127,211,170,.18);background:rgba(184,246,216,.04)}
.socials svg{width:21px;height:21px;stroke:currentColor}

.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px;border-bottom:1px solid var(--line);padding-bottom:24px}
.eyebrow{color:var(--green);font-size:13px;text-transform:uppercase}
.title{font-size:clamp(36px,6vw,88px);line-height:.9;margin:16px 0 0;letter-spacing:.08em}
.muted{color:var(--muted);line-height:1.8;letter-spacing:.05em}
.category-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.category-card{min-height:260px;border:1px solid var(--line);padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:linear-gradient(180deg,rgba(184,246,216,.05),rgba(184,246,216,.015));transition:.25s}
.category-card:hover{transform:translateY(-4px);border-color:var(--green2);box-shadow:0 0 30px rgba(127,211,170,.12)}
.category-card .num{color:var(--green);font-size:13px}
.category-card h2{font-size:28px;letter-spacing:.12em}
.project-grid,.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{border:1px solid var(--line);background:rgba(255,255,255,.02);overflow:hidden;transition:.25s ease}
.card:hover{transform:translateY(-3px);border-color:var(--green2);box-shadow:0 0 28px rgba(127,211,170,.12)}
.thumb{aspect-ratio:16/10;background:linear-gradient(135deg,#08130f,#14271f);display:grid;place-items:center;color:rgba(184,246,216,.26);font-size:13px;letter-spacing:.22em}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.card-info{padding:18px}
.card-info h3{margin:0 0 10px;font-size:18px;letter-spacing:.08em}
.meta{font-size:12px;color:var(--green2);text-transform:uppercase}
.filter{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:28px}
.filter a{border:1px solid var(--line);padding:11px 16px;color:var(--muted);font-size:13px;transition:.25s ease}
.filter a.active,.filter a:hover{border-color:var(--green2);color:var(--green);box-shadow:0 0 18px rgba(127,211,170,.12)}
.detail{max-width:1180px;margin:auto}
.hero-media{aspect-ratio:16/8;border:1px solid var(--line);background:linear-gradient(135deg,#06100d,#14231d);margin-bottom:34px;overflow:hidden}
.hero-media iframe,.video-wrap iframe{width:100%;height:100%;border:0}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:54px}
.credits{list-style:none;margin:0;padding:0;color:var(--muted);line-height:2}
.video-wrap{aspect-ratio:16/9;border:1px solid var(--line);background:#000}
.contact-list{display:grid;gap:18px;max-width:720px}
.contact-item{border:1px solid var(--line);padding:24px;display:flex;justify-content:space-between;align-items:center;color:var(--green);transition:.25s ease}
.contact-item:hover{border-color:var(--green2);box-shadow:0 0 28px rgba(127,211,170,.12)}

@media(max-width:900px){
  .header{
    height:72px;
    padding:0 22px;
  }

  .brand{
    font-size:18px;
    letter-spacing:.42em;
  }

  .nav{
    position:fixed;
    right:18px;
    top:72px;
    display:none;
    flex-direction:column;
    gap:0;
    background:rgba(2,8,6,.94);
    border:1px solid var(--line);
    width:220px;
    z-index:80;
  }

  .nav.open{display:flex}

  .nav a{
    padding:18px;
    border-bottom:1px solid var(--line);
    font-size:15px;
  }

  .menu-toggle{display:block}

  /* MOBILE HOME V10: keep the door/sign smaller and keep the action row near the bottom, not floating in the middle. */
  .home{
    height:100svh;
    min-height:720px;
    overflow:hidden;
  }

  .home::before{
    inset:0;
    height:100%;
    min-height:0;
    background-size:auto 72%;
    background-position:center 92px;
    transform:none;
  }

  .home::after{
    inset:0;
    height:100%;
    min-height:0;
    background:
      radial-gradient(circle at 50% 32%,rgba(184,246,216,.16) 0 5%,rgba(127,211,170,.08) 6% 14%,transparent 24%),
      radial-gradient(circle at 50% 56%,transparent 0 28%,rgba(0,0,0,.10) 48%,rgba(0,0,0,.60) 100%);
  }

  .view-btn{
    left:22px;
    top:auto;
    bottom:88px;
    width:52vw;
    max-width:260px;
    min-width:185px;
    height:54px;
    padding:0 18px;
    display:flex;
    align-items:center;
    justify-content:center;
    white-space:nowrap;
    font-size:12px;
    transform:none;
  }

  .view-btn:hover{transform:translateY(-2px)}

  .view-btn span{margin-left:12px}

  .home-page .socials{
    position:absolute;
    right:22px;
    top:auto;
    bottom:88px;
    gap:10px;
  }

  .home-page .socials a{
    width:42px;
    height:42px;
    border-radius:10px;
  }

  .home-page .socials svg{
    width:19px;
    height:19px;
  }

  /* Inner pages: hide fixed social icons on mobile so they never cover cards/text. */
  body:not(.home-page) .socials{
    display:none !important;
  }

  .page{
    padding:112px 22px 120px;
  }

  .section-head{
    display:block;
    margin-bottom:30px;
  }

  .title{
    font-size:42px;
    line-height:1;
  }

  .filter{
    gap:12px;
    margin-bottom:28px;
  }

  .filter a{
    padding:12px 15px;
    font-size:13px;
  }

  .category-grid,
  .project-grid,
  .team-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .category-card{
    min-height:180px;
  }

  .detail-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  /* MOBILE PROJECT CARDS V10: make covers much shorter so the title/meta never collide with the next card or browser toolbar. */
  .thumb{
    height:170px !important;
    max-height:170px !important;
    aspect-ratio:auto !important;
  }

  .project-grid .card{
    min-height:0;
  }

  .card-info{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:18px 20px 20px;
  }

  .card-info h3{
    margin:0;
    font-size:24px;
    line-height:1.2;
    letter-spacing:.12em;
  }

  .card-info .meta{
    display:block;
    font-size:13px;
    line-height:1.5;
    word-break:keep-all;
  }

  .hero-media{
    aspect-ratio:16/9;
  }

  .contact-item{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
}

@media(max-width:390px){
  .view-btn{
    width:180px;
    font-size:11px;
    left:18px;
  }

  .home-page .socials{
    right:18px;
    gap:8px;
  }

  .home-page .socials a{
    width:38px;
    height:38px;
  }
}


/* =========================
   V12 MOBILE FIXES
   ========================= */
@media(max-width:900px){
  /* Home: make the door/sign slightly larger, then put CTA and socials in two clean rows below the image. */
  .home{
    height:100svh;
    min-height:0;
    overflow:hidden;
    padding:0;
  }

  .home::before{
    inset:auto 0 auto 0;
    top:88px;
    height:58svh;
    min-height:430px;
    max-height:560px;
    background-size:auto 110%;
    background-position:center center;
    background-repeat:no-repeat;
    transform:none;
  }

  .home::after{
    inset:auto 0 auto 0;
    top:88px;
    height:58svh;
    min-height:430px;
    max-height:560px;
    background:
      radial-gradient(circle at 50% 26%,rgba(184,246,216,.18) 0 5%,rgba(127,211,170,.08) 6% 15%,transparent 26%),
      linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.20) 65%,rgba(0,0,0,.55));
  }

  .view-btn{
    left:22px;
    right:22px;
    top:auto;
    bottom:132px;
    width:auto;
    max-width:none;
    min-width:0;
    height:58px;
    padding:0 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    letter-spacing:.22em;
    transform:none;
    white-space:nowrap;
  }

  .view-btn:hover{
    transform:translateY(-2px);
  }

  .view-btn span{
    margin-left:16px;
  }

  .home-page .socials{
    position:absolute;
    left:50%;
    right:auto;
    bottom:62px;
    transform:translateX(-50%);
    display:flex;
    justify-content:center;
    gap:18px;
  }

  .home-page .socials a{
    width:50px;
    height:50px;
    border-radius:12px;
  }

  .home-page .socials svg{
    width:22px;
    height:22px;
  }

  /* Projects: prevent big title/meta collision on mobile. */
  .project-grid{
    gap:28px;
  }

  .project-grid .card{
    display:block;
  }

  .project-grid .thumb{
    height:135px !important;
    max-height:135px !important;
    aspect-ratio:auto !important;
  }

  .project-grid .card-info{
    padding:16px 20px 22px !important;
    display:flex;
    flex-direction:column;
    gap:8px;
    background:rgba(0,0,0,.28);
  }

  .project-grid .card-info h3{
    font-size:22px !important;
    line-height:1.15 !important;
    margin:0 !important;
    letter-spacing:.12em;
    white-space:normal;
  }

  .project-grid .card-info .meta{
    font-size:12px !important;
    line-height:1.5 !important;
    margin:0 !important;
  }
}

@media(max-width:390px){
  .home::before,
  .home::after{
    top:82px;
    height:56svh;
    min-height:390px;
  }

  .view-btn{
    left:18px;
    right:18px;
    bottom:126px;
    height:54px;
    font-size:12px;
  }

  .home-page .socials{
    bottom:58px;
    gap:14px;
  }

  .home-page .socials a{
    width:46px;
    height:46px;
  }
}

/* =========================
   V13 MOBILE FINAL TWEAKS
   ========================= */
@media(max-width:900px){
  /* Home: keep hero slightly larger, but move action rows below the image with clear spacing. */
  .home::before{
    top:86px;
    height:59svh;
    min-height:440px;
    max-height:575px;
    background-size:auto 116%;
    background-position:center center;
  }

  .home::after{
    top:86px;
    height:59svh;
    min-height:440px;
    max-height:575px;
  }

  .view-btn{
    left:50%;
    right:auto;
    top:auto;
    bottom:100px;
    transform:translateX(-50%);
    width:82vw;
    max-width:340px;
    height:52px;
    padding:0 18px;
    font-size:12px;
    letter-spacing:.22em;
  }

  .view-btn:hover{
    transform:translateX(-50%) translateY(-2px);
  }

  .view-btn span{
    margin-left:14px;
  }

  .home-page .socials{
    position:absolute;
    left:50%;
    right:auto;
    bottom:30px;
    transform:translateX(-50%);
    gap:18px;
  }

  .home-page .socials a{
    width:48px;
    height:48px;
    border-radius:12px;
  }

  /* Projects mobile: make cards more compact so title/meta never feel cramped. */
  .projects-page .page{
    padding-top:100px;
  }

  .projects-page .section-head{
    margin-bottom:24px;
  }

  .projects-page .filter{
    margin-bottom:22px;
  }

  .projects-page .project-grid{
    gap:24px;
  }

  .projects-page .project-grid .thumb{
    height:118px !important;
    max-height:118px !important;
    aspect-ratio:auto !important;
  }

  .projects-page .project-grid .card-info{
    padding:14px 18px 18px !important;
    gap:6px;
  }

  .projects-page .project-grid .card-info h3{
    font-size:18px !important;
    line-height:1.15 !important;
    letter-spacing:.14em;
  }

  .projects-page .project-grid .card-info .meta{
    font-size:11px !important;
    line-height:1.45 !important;
  }
}

@media(max-width:390px){
  .home::before,
  .home::after{
    top:82px;
    height:58svh;
    min-height:420px;
  }

  .view-btn{
    bottom:96px;
    width:84vw;
    height:50px;
    font-size:11px;
  }

  .home-page .socials{
    bottom:28px;
    gap:14px;
  }

  .home-page .socials a{
    width:44px;
    height:44px;
  }
}


/* =========================
   V14 MOBILE PROJECTS FINAL
   ========================= */
@media(max-width:900px){
  /* Projects page title area: separate PROJECTS and CATEGORIES cleanly */
  .projects-page .page{
    padding-top:104px !important;
    padding-left:22px !important;
    padding-right:22px !important;
    padding-bottom:120px !important;
  }

  .projects-page .section-head{
    margin-bottom:28px !important;
    padding-bottom:26px !important;
  }

  .projects-page .section-head .title{
    font-size:46px !important;
    line-height:1.04 !important;
    margin:18px 0 0 !important;
    letter-spacing:.075em !important;
  }

  .projects-page .section-head > a.eyebrow{
    display:block !important;
    margin-top:18px !important;
    line-height:1.4 !important;
    letter-spacing:.18em !important;
  }

  .projects-page .filter{
    margin-top:0 !important;
    margin-bottom:30px !important;
    gap:12px !important;
  }

  .projects-page .filter a{
    padding:12px 15px !important;
    font-size:13px !important;
    line-height:1 !important;
  }

  /* Project cards: image and text are fully separated; no overlap possible */
  .projects-page .project-grid{
    gap:28px !important;
  }

  .projects-page .project-grid .card{
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    min-height:0 !important;
    background:rgba(255,255,255,.018) !important;
  }

  .projects-page .project-grid .thumb{
    display:block !important;
    width:100% !important;
    height:150px !important;
    max-height:150px !important;
    min-height:150px !important;
    aspect-ratio:auto !important;
    overflow:hidden !important;
    flex:0 0 150px !important;
    background:linear-gradient(135deg,#06120e,#053322) !important;
  }

  .projects-page .project-grid .thumb img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    display:block !important;
  }

  .projects-page .project-grid .card-info{
    position:relative !important;
    z-index:2 !important;
    display:block !important;
    padding:18px 20px 22px !important;
    background:rgba(2,6,5,.96) !important;
    border-top:1px solid rgba(184,246,216,.18) !important;
    transform:none !important;
    margin:0 !important;
  }

  .projects-page .project-grid .card-info h3{
    display:block !important;
    position:relative !important;
    margin:0 0 10px 0 !important;
    padding:0 !important;
    font-size:22px !important;
    line-height:1.18 !important;
    letter-spacing:.16em !important;
    white-space:normal !important;
    transform:none !important;
  }

  .projects-page .project-grid .card-info .meta{
    display:block !important;
    position:relative !important;
    margin:0 !important;
    padding:0 !important;
    font-size:12px !important;
    line-height:1.5 !important;
    letter-spacing:.14em !important;
    transform:none !important;
  }
}

@media(max-width:390px){
  .projects-page .section-head .title{
    font-size:42px !important;
  }

  .projects-page .project-grid .thumb{
    height:135px !important;
    max-height:135px !important;
    min-height:135px !important;
    flex-basis:135px !important;
  }

  .projects-page .project-grid .card-info h3{
    font-size:20px !important;
  }
}

/* =========================
   V16 MOBILE CHROME / SAFARI STABLE FIX
   Mobile home no longer depends on browser toolbar height.
========================= */
@media(max-width:900px){
  .home{
    height:100svh !important;
    min-height:640px !important;
    max-height:none !important;
    overflow:hidden !important;
    padding:0 !important;
    position:relative !important;
  }

  .home::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:78px !important;
    height:55svh !important;
    min-height:345px !important;
    max-height:470px !important;
    inset:auto 0 auto 0 !important;
    background-image:url('../assets/img/home-hero.png') !important;
    background-size:auto 116% !important;
    background-position:center center !important;
    background-repeat:no-repeat !important;
    transform:none !important;
    filter:saturate(.98) contrast(1.02) brightness(.98) !important;
    animation:heroFlicker 4.2s ease-in-out infinite !important;
  }

  .home::after{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:78px !important;
    height:55svh !important;
    min-height:345px !important;
    max-height:470px !important;
    inset:auto 0 auto 0 !important;
    pointer-events:none !important;
    background:
      radial-gradient(circle at 50% 25%,rgba(184,246,216,.18) 0 5%,rgba(127,211,170,.08) 6% 15%,transparent 26%),
      linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.20) 68%,rgba(0,0,0,.45)) !important;
    mix-blend-mode:screen !important;
    opacity:.62 !important;
    animation:exitLightPulse 4.2s ease-in-out infinite !important;
  }

  .view-btn{
    position:absolute !important;
    left:50% !important;
    top:calc(78px + 55svh + 18px) !important;
    bottom:auto !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:78vw !important;
    max-width:330px !important;
    min-width:0 !important;
    height:50px !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:12px !important;
    line-height:1 !important;
    letter-spacing:.22em !important;
    white-space:nowrap !important;
    z-index:10 !important;
  }

  .view-btn:hover{
    transform:translateX(-50%) translateY(-2px) !important;
  }

  .view-btn span{
    margin-left:14px !important;
  }

  .home-page .socials{
    position:absolute !important;
    left:50% !important;
    top:calc(78px + 55svh + 86px) !important;
    right:auto !important;
    bottom:auto !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    justify-content:center !important;
    gap:16px !important;
    z-index:10 !important;
  }

  .home-page .socials a{
    width:46px !important;
    height:46px !important;
    border-radius:12px !important;
  }

  .home-page .socials svg{
    width:20px !important;
    height:20px !important;
  }

  .projects-page .section-head{
    margin-bottom:34px !important;
    padding-bottom:28px !important;
  }

  .projects-page .section-head .title{
    font-size:42px !important;
    line-height:1.05 !important;
    margin:20px 0 0 !important;
  }

  .projects-page .section-head > a.eyebrow{
    display:block !important;
    margin-top:22px !important;
  }

  .projects-page .filter{
    margin-top:4px !important;
    margin-bottom:32px !important;
  }

  .projects-page .project-grid .thumb{
    height:138px !important;
    max-height:138px !important;
    min-height:138px !important;
    flex-basis:138px !important;
  }

  .projects-page .project-grid .card-info h3{
    font-size:20px !important;
    line-height:1.18 !important;
  }
}

@media(max-width:390px){
  .home{
    min-height:620px !important;
  }

  .home::before,
  .home::after{
    top:74px !important;
    height:53svh !important;
    min-height:325px !important;
  }

  .view-btn{
    top:calc(74px + 53svh + 16px) !important;
    width:80vw !important;
    height:48px !important;
    font-size:11px !important;
  }

  .home-page .socials{
    top:calc(74px + 53svh + 80px) !important;
    gap:14px !important;
  }

  .home-page .socials a{
    width:44px !important;
    height:44px !important;
  }
}