/* ===========================================================
   UNAMIQ — subpages (About / Projects / Contact)
   Black background, same nav from main.css, subtle "engineered"
   tech details, white text that sits quietly rather than
   shouting for attention.
=========================================================== */

html, body{
    min-height:100%;
}

/* ===========================================================
   TECH GRID BACKDROP
   An almost-invisible blueprint-style grid, fixed behind all
   content. This is the "subtle tech detail" on an otherwise
   flat black background.
=========================================================== */

.tech-grid{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;

    background-image:
        linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:80px 80px;

    /* fade the grid out toward the bottom so it doesn't compete
       with page content further down */
    -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
    mask-image:linear-gradient(to bottom, black, transparent 85%);
}

/* ===========================================================
   PAGE WRAPPER
   Shared padding so content clears the fixed nav, and a
   comfortable max-width so lines of text don't stretch too
   wide on large screens.
=========================================================== */

.page-wrapper{
    position:relative;
    z-index:1;

    max-width:1200px;
    margin:0 auto;

    padding:160px 44px 120px;
}

.page-heading{
    font-size:clamp(2.2rem, 5vw, 4rem);
    font-weight:700;
    letter-spacing:.05em;
    text-transform:uppercase;
    line-height:1.05;
    margin-bottom:64px;
}

@media(max-width:600px){

    .page-wrapper{ padding:120px 24px 80px; }
    .page-heading{ margin-bottom:44px; }

}

/* ===========================================================
   FOUNDERS GRID (About page)
=========================================================== */

.founders-grid{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:36px;
}

.founder-card{
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
    cursor:default;
}

.founder-card:hover{
    transform:scale(1.045);
}

.founder-photo{
    aspect-ratio:4 / 5;
    margin-bottom:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.015));
    border:1px solid rgba(255,255,255,.08);

    overflow:hidden;
}

.founder-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.founder-photo .initials{
    font-family:"Space Grotesk", sans-serif;
    font-size:2.4rem;
    font-weight:700;
    letter-spacing:.04em;
    color:rgba(255,255,255,.16);
}

.founder-name{
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:8px;
}

.founder-bio{
    font-size:.82rem;
    line-height:1.55;
    color:rgba(255,255,255,.5);
}

@media(max-width:900px){
    .founders-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 28px; }
}

@media(max-width:520px){
    .founders-grid{ grid-template-columns:1fr; }
}

/* ===========================================================
   PROJECTS LIST (Projects page)
=========================================================== */

.projects-list{
    display:flex;
    flex-direction:column;
    border-top:1px solid rgba(255,255,255,.1);
}

.project-item{
    display:block;
    text-decoration:none;
    color:inherit;

    border-bottom:1px solid rgba(255,255,255,.1);
    transition:background-color .35s ease;
}

.project-item:hover{
    background-color:rgba(255,255,255,.03);
}

.project-row{
    display:flex;
    align-items:baseline;
    gap:28px;

    padding:38px 0;
}

.project-index{
    font-family:"Space Mono", monospace;
    font-size:.78rem;
    color:rgba(255,255,255,.35);
    width:44px;
    flex-shrink:0;
}

.project-name{
    flex:1;
    font-size:clamp(1.3rem, 3.2vw, 2.1rem);
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
}

.project-status{
    font-family:"Space Mono", monospace;
    font-size:.7rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    white-space:nowrap;
}

.project-item.tba .project-name{
    color:rgba(255,255,255,.32);
}

.project-item.tba .project-status{
    color:rgba(255,255,255,.22);
}

/* ---------- Expanding details panel (Field Sense) ----------
   grid-template-rows 0fr -> 1fr gives a smooth, content-height-
   aware reveal without hardcoding a max-height. */

.project-details{
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1);
}

.project-item:hover .project-details,
.project-item:focus-within .project-details{
    grid-template-rows:1fr;
}

.details-inner{
    overflow:hidden;
}

.details-content{
    display:flex;
    gap:44px;
    align-items:flex-start;

    /* Lines the image up with the start of the project name text
       (index column width + row gap) rather than the page edge */
    margin-left:72px;

    padding-bottom:48px;

    opacity:0;
    transform:translateY(8px);
    transition:opacity .4s ease .05s, transform .4s ease .05s;
}

.project-item:hover .details-content,
.project-item:focus-within .details-content{
    opacity:1;
    transform:translateY(0);
}

.details-image{
    flex:0 0 460px;
    aspect-ratio:16 / 10;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);

    overflow:hidden;
}

.details-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.details-text{
    flex:1;
    font-size:.9rem;
    line-height:1.7;
    color:rgba(255,255,255,.6);
    max-width:520px;
}

@media(max-width:760px){

    .details-content{
        flex-direction:column;
        gap:24px;
        margin-left:0;
    }

    .details-image{
        flex-basis:auto;
        width:100%;
    }

}

@media(max-width:600px){

    .project-row{ padding:26px 0; gap:16px; }
    .project-index{ width:28px; }

}

/* ===========================================================
   PROJECT DETAIL PAGE (e.g. Field Sense)
=========================================================== */

.project-hero-image{
    width:100%;
    aspect-ratio:16 / 9;
    margin-bottom:52px;

    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.1);

    overflow:hidden;
}

.project-hero-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.project-body{
    max-width:720px;
    display:flex;
    flex-direction:column;
    gap:22px;
}

.body-copy{
    font-size:.95rem;
    line-height:1.75;
    color:rgba(255,255,255,.6);
}

.spec-list{
    margin-top:18px;
    border-top:1px solid rgba(255,255,255,.1);
}

.spec-row{
    display:flex;
    justify-content:space-between;
    gap:24px;

    padding:16px 0;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.spec-label{
    font-family:"Space Mono", monospace;
    font-size:.72rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,.4);
    white-space:nowrap;
}

.spec-value{
    font-size:.85rem;
    color:rgba(255,255,255,.75);
    text-align:right;
}

/* ===========================================================
   SITE FOOTER (About / Projects / project detail pages)
=========================================================== */

.site-footer{
    position:relative;
    z-index:1;

    border-top:1px solid rgba(255,255,255,.1);
    margin-top:40px;
    padding:56px 44px;

    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:end;
    gap:36px;
}

.footer-left{
    justify-self:start;
}

.footer-left a{
    text-decoration:none;
    color:inherit;
    display:inline-block;
    transition:opacity .3s ease;
}

.footer-left a:hover{
    opacity:.7;
}

.footer-logo{
    font-family:"Space Grotesk", sans-serif;
    font-weight:700;
    font-size:1.35rem;
    letter-spacing:.22em;
    text-transform:uppercase;
    margin-bottom:10px;
}

.footer-tagline{
    font-family:"Space Mono", monospace;
    font-size:.7rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.footer-meta{
    justify-self:center;
    text-align:center;

    display:flex;
    flex-direction:column;
    gap:6px;

    font-family:"Space Mono", monospace;
    font-size:.7rem;
    letter-spacing:.05em;
    color:rgba(255,255,255,.4);
}

.footer-meta .copyright-symbol{
    font-size:1.3em;
    line-height:0;
    position:relative;
    top:.06em;
}

.footer-right{
    justify-self:end;

    display:flex;
    align-items:center;
    gap:22px;
}

.footer-right a{
    display:flex;
    color:rgba(255,255,255,.6);
    transition:color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}

.footer-right a:hover{
    color:rgba(255,255,255,1);
    transform:scale(1.15);
}

.footer-right svg{
    width:20px;
    height:20px;
}

@media(max-width:700px){

    .site-footer{
        grid-template-columns:1fr;
        justify-items:start;
        padding:44px 24px;
    }

    .footer-meta{
        justify-self:start;
        text-align:left;
    }

}

/* ===========================================================
   CONTACT FORM (Contact page)
=========================================================== */

.contact-form{
    max-width:540px;
    display:flex;
    flex-direction:column;
    gap:30px;
}

.form-field{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.form-field label{
    font-family:"Space Mono", monospace;
    font-size:.7rem;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.form-field input,
.form-field textarea{
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.25);

    color:white;
    font-family:"Space Grotesk", sans-serif;
    font-size:1rem;

    padding:10px 2px;
    outline:none;

    transition:border-color .3s ease;
}

.form-field input:focus,
.form-field textarea:focus{
    border-bottom-color:rgba(255,255,255,.85);
}

.form-field textarea{
    resize:vertical;
    min-height:130px;
    line-height:1.5;
}

.form-field input::placeholder,
.form-field textarea::placeholder{
    color:rgba(255,255,255,.28);
}

.contact-submit{
    align-self:flex-start;
    margin-top:8px;

    background:transparent;
    border:1px solid rgba(255,255,255,.4);
    color:white;

    font-family:"Space Grotesk", sans-serif;
    font-weight:700;
    font-size:.82rem;
    letter-spacing:.12em;
    text-transform:uppercase;

    padding:15px 36px;
    cursor:pointer;

    transition:background-color .3s ease, color .3s ease;
}

.contact-submit:hover{
    background-color:white;
    color:black;
}

.form-status{
    font-size:.82rem;
    line-height:1.6;
    margin-top:4px;
}

.form-status.is-success{
    color:rgba(140,255,170,.85);
}

.form-status.is-error{
    color:rgba(255,140,140,.85);
}

.contact-note{
    font-size:.78rem;
    color:rgba(255,255,255,.35);
    margin-bottom:48px;
    max-width:540px;
    line-height:1.6;
}