/* ───────── css/styles.css ───────── */
:root{
  --gutter-x: 24px;     /* (adjusts margins) */
  --vh:1vh;
  /* Safety net for JS-less browsers */
  --header-h: 64px;  
  font-family:'Roboto Condensed',sans-serif;
  color-scheme:dark;
  --acid:#ffffff;
  --slate:#000000;
  --graphite:#0e0e0e;
  --hot:#ffffff;
  --ghost:#777;
  /* ====== THEME ====== */
  --accent:#dbdbdb;     /* neon-cyan accent */
  --glass:rgba(14,14,14,.55);/* translucent card surface */
  --blur:12px;          /* backdrop blur strength */
}

*{box-sizing:border-box;margin:0;padding:0}

@media (max-width: 767px){
  :root{ --gutter-x: 12px; }    /* tighter on phones */
}

@font-face{
  font-family:"BiohazardHead";
  src:url("../fonts/BebasNeue-Regular.woff2") format("woff2"),
      url("../fonts/BebasNeue-Regular.woff")  format("woff");
  font-weight:400; font-style:normal;
}
@font-face{
  font-family:"Machina";
  src:url("../fonts/Bebas_Neue/BebasNeue-Regular.ttf") format("opentype");
  font-weight:700;
}
@font-face{
  font-family:"ArchiveCond";
  src:url("..//fonts/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight:500;
}
@font-face{
  font-family:"SpaceMono";
  src:url("../fonts/Space_Mono/SpaceMono-Regular.ttf") format("opentype");
  font-weight:400;
}

body{
    
    background:var(--slate);color:var(--acid);
    padding-top: calc(var(--header-h) + 2vh);
    
}

/* Add horizontal padding only to main content blocks, not header */
.content-block, .section, main.grid {
    padding-left: var(--gutter-x);
    padding-right: var(--gutter-x);
}

a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* Fix 100 vh on mobile */
@media(max-width:767px){
  body,html{height:calc(var(--vh)*100)}
}

header.nav{
  position:fixed;top:0;left:0;width:100vw;/* Ensure full viewport width */
  z-index:100;
  display:flex;flex-direction:column;align-items:center;
  background:linear-gradient(to bottom, rgba(11,11,12,0.6) 0%, rgba(11,11,12,0) 100%);
  text-shadow:0 0 4px var(--acid);
  mix-blend-mode:normal;
  font-size:clamp(14px,1.1vw,20px);
  margin:0;
  box-sizing:border-box;
  padding: 8px 0;
}

header.nav nav{
  display:flex; gap:24px;
  font-family:'ArchiveCond',sans-serif;
}
header.nav .logo{
  font-family:"Machina",sans-serif;
  font-weight:700;            /* bold blocky */  
  font-size:clamp(40.5px,5.6vw,72px); /* 1.125× larger */
  color:var(--acid);
  transform:scale(.95);
  transition:transform .3s, filter .1s;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:2px;
  position:relative; /* for underline */
}

header.nav .logo:hover{
  transform:scale(1);
}

/* Fancy underline animation for logo */
header.nav .logo::after{
  content:"";
  position:absolute;left:0;right:0;bottom:0;
  height:3px;
  background:var(--accent);
  transform:scaleX(0);
  transform-origin:center center;
  transition:transform .25s;
}
header.nav .logo:hover::after{
  transform:scaleX(1);
}

header.social{
  display:flex; gap:24px;
  font-family:'ArchiveCond',sans-serif;
  text-shadow:0 0 2px var(--acid);
  top:0; left:0; width:100%;
  z-index:100; padding:8px 0 0;
  display:flex; flex-direction:column;      /* stack logo + nav */
  align-items:center;                       /* center horizontally */
  mix-blend-mode:normal;
  font-size:clamp(14px,1.1vw,20px);
}

footer{
  text-align:center;
  padding:3rem 1rem;
  font-size:.95rem;
  opacity:.7;
  font-family:"SpaceMono",monospace;
}

#contact {
  font-family:"SpaceMono",monospace;
  max-width:1300px;
  margin:0 auto;
  padding:9vh var(--gutter-x) 4vh;
  line-height:1.4;
  color:var(--acid);
  text-shadow:0 0 2px var(--acid);
  border-bottom:1px solid var(--graphite);
}
#contact form{
  font-family:"SpaceMono",monospace;
  max-width:520px;
  margin:0 auto;
  display:flex;flex-direction:column;gap:1.5rem;
  color:var(--acid);
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  padding:2rem 1.5rem 1.5rem;
  border-radius:10px;
}
#contact label{
  font-family:"ArchiveCond",sans-serif;
  margin-bottom:.4rem;
  font-weight:500;
  font-size:1rem;
  text-align:left;
  color:var(--accent);
  letter-spacing:.04em;
  text-transform:uppercase;
}
#contact input,
#contact textarea{
  font-family:"SpaceMono",monospace;
  padding:.75rem 1rem;
  margin-bottom:.5rem;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.35);
  color:var(--acid);
  border-radius:4px;
  font-size:1rem;
  transition:border-color .2s, box-shadow .2s;
  resize:vertical;
}
#contact input:focus,
#contact textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 6px var(--accent);
  outline:none;
}
#contact input[type="submit"]{
  font-family:"ArchiveCond",sans-serif;
  cursor:pointer;
  background:var(--accent);
  color:var(--slate);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  border:none;
  border-radius:4px;
  padding:.85rem 1.5rem;
  transition:background .2s,color .2s,box-shadow .2s;
  margin-top:.5rem;
}
#contact input[type="submit"]:hover{
  background:var(--acid);
  color:var(--graphite);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}
#contact button[type="submit"]{
  font-family:"ArchiveCond",sans-serif;
  cursor:pointer;
  background:var(--accent);
  color:var(--slate);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  border:none;
  border-radius:4px;
  padding:.85rem 1.5rem;
  transition:background .2s,color .2s,box-shadow .2s;
  margin-top:.5rem;
}
#contact button[type="submit"]:hover{
  background:var(--acid);
  color:var(--graphite);
  box-shadow:0 2px 12px rgba(0,0,0,.25);
}

    

header.nav a{
    transition:opacity .3s
}

header.nav a:hover{
    opacity:.8
}

/* underline kicker */
header.nav nav a::after{
  content:"";
  display:block;
  height:2px;
  background:var(--accent);
  transform:scaleX(0);transition:transform .25s;
}
header.nav nav a:hover::after{transform:scaleX(1);}
@media(max-width:767px){
  header.nav{top:8px;justify-content:space-between;padding:0 var(--gutter);font-size:12px}
  header.nav .logo{margin:0;font-weight:bold}
  header.nav nav{gap:16px}
}

/* GRID */
.grid{
  --cols:4;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  gap:24px;
  padding-top: calc(var(--header-h)*.5 + 2vh);
  counter-reset: item;   /* Reset Project counter */
}

@media(max-width:1024px){.grid{--cols:3}}
@media(max-width:767px){.grid{--cols:2;gap:12px;padding:calc(var(--vh)*5) var(--gutter)}}

.item:not(.hidden) h2::before{     /* only real cards */
  counter-increment:item;
}

.item{
  position:relative;
  counter-increment:item;
  overflow:hidden;cursor:pointer;
  opacity:0;transform:translateY(40px);
  transition:opacity .6s,transform .6s;
}
.item.loaded{opacity:1;transform:none}


/* Item Spans */

.item[data-span="banner"] { grid-column: span 3; }
.item[data-span="portrait-xl"]{ grid-row: span 3; }
.item[data-span="wide"] { grid-column: span 2; }
.item[data-span="tall"] { grid-row:    span 2; }
.item[data-span="big"]  { grid-column: span 2; grid-row: span 2; }

@media(max-width:767px){
  .item[data-span="wide"],
  .item[data-span="tall"],
  .item[data-span="big"]{ grid-column: span 2; grid-row: span 1; }
}

small,code,.mono{font-family:"SpaceMono",monospace}

.item h2{
  font-family:"ArchiveCond",sans-serif;
  letter-spacing:.04em;
  font-size:clamp(12px,.9vw,18px);
  text-transform:uppercase;
  margin-bottom:8px;
  line-height:1.1;
  display:inline-block;       /* so the counter sits inline */
  position:relative;
  transition:opacity .5s; /* Only opacity transitions */
}

.item h2::before{
  counter-increment:item;
  content: counter(item,decimal-leading-zero) " ";
  font-family:'Roboto Mono',monospace;
  margin-right:.75em;
}

/* Underline kicker for item h2, styled like nav */
.item h2::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .25s;
  margin-top: 3px;
}
.item:hover h2::after {
  transform: scaleX(1);
}

.thumb{
  background-size:cover;background-position:center;
  padding-bottom:62.5%;
  transition:opacity .5s,transform .5s
}
.item:hover .thumb {
    opacity:.8;
    transform:scale(1.04);
}
.item:hover h2{
  opacity:.8;
}

.content-block{
  max-width:800px;
  margin:0 auto;
  padding:20vh var(--gutter);
  font-family:'Roboto Mono',monospace;
  line-height:1.5;
}

#about{
  font-family:"ArchiveCond",sans-serif;
  max-width:1300px;
  margin:0 auto;
  padding:4vh var(--gutter-x) 1vh;
  line-height:1.2;
  color:var(--acid);
  text-shadow:0 0 2px var(--acid);
  border-bottom:1px solid var(--graphite);
}

#crew{
  font-family:"ArchiveCond",sans-serif;
  max-width:1300px;
  margin:0 auto;
  padding:4vh var(--gutter-x) 4vh;
  line-height:1.2;
  color:var(--acid);
  text-shadow:0 0 2px var(--acid);
  border-bottom:1px solid var(--graphite);
}

/* PIPELINE SECTION */
.section h2{
  font-family:"ArchiveCond",sans-serif;
  font-size:clamp(1.1rem,1.5vw + .5rem,2rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--accent);
  margin:0 0 2.2rem;
  position:relative;
}
.section h2::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  width:40px;height:2px;
  background:var(--accent);
}

#pipeline{
  font-family:"ArchiveCond",sans-serif;
  padding:4vh var(--gutter-x) 1vh;
  line-height:1.2;
}
.pipeline-steps{
  gap:var(--gutter-x);
}
.pipeline-step{
  border-radius:10px;
}

.pipeline-step {
  background: var(--glass);
  color: var(--acid);
  border-radius: 8px;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
  padding: 2rem 1.5rem 1.5rem;
  min-width: 220px;
  max-width: 320px;
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.97;
  transition: transform .25s, box-shadow .25s, opacity .25s;
  text-align: center;
}

.pipeline-step:hover {
  transform: translateY(-4px) scale(1.028);
  box-shadow: 0 10px 32px rgba(0,0,0,.55);
  opacity: 1;
}

.pipeline-step h3 {
  font-family: "ArchiveCond", sans-serif;
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  margin-top: 0;
  color: var(--hot);
  text-shadow: 0 0 2px var(--acid);
  font-weight: 500;
}

.pipeline-step p,
.pipeline-step small {
  font-family: "SpaceMono", monospace;
  font-size: 0.92rem;
  color: var(--acid);
  opacity: 0.85;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .pipeline-steps {
    gap: 1.2rem;
  }
  .pipeline-step {
    padding: 1.2rem 0.7rem 1rem;
    min-width: 160px;
    max-width: 240px;
  }
}

@media (max-width: 767px) {
  #pipeline {
    padding: 6vh var(--gutter-x) 2vh;
  }
  .pipeline-steps {
    gap: 0.7rem;
    flex-direction: column;
    align-items: center;
  }
  .pipeline-step {
    min-width: 0;
    max-width: 320px;
    width: 100%;
    margin: 0 auto;
    padding: 1rem 0.5rem 1rem;
  }
}

/* TEAM SECTION */
#team {
  font-family:"ArchiveCond",sans-serif;
  max-width: 1300px;
  margin: 0 auto;
  padding: 4vh var(--gutter-x) 2.5vh; /* ↓ tighter bottom gap */
  line-height: 1.2;
  color: var(--acid);
  text-shadow: 0 0 2px var(--acid);
  border-bottom: 1px solid var(--graphite);
}

.team-container {
  display: flex;
  gap: var(--gutter-x);
  margin: 3rem 0; /* slightly more spacing between heading and founder images */
  padding: 0;
  justify-content: center;
  flex-wrap: wrap;
}

.portrait {
  width: clamp(200px, 22vw, 300px);
  padding: 0 0 1.25rem;
  overflow: hidden; /* allow image to bleed */
  background:var(--glass);
  color: var(--acid);
  border-radius: 10px;
  /* glass-card behaviour */
  /* duplicate here to avoid extra class */
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  transition:transform .25s, box-shadow .25s, opacity .25s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.96;
}
.portrait:hover {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 32px rgba(0,0,0,.55);
  opacity: 1;
}
.portrait img {
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  background: var(--slate);
  display: block;
}
.portrait h3 {
  font-family: "ArchiveCond", sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  margin-top: 0;
  color: var(--hot);
  text-shadow: 0 0 2px var(--acid);
  font-weight: 500;
  text-align: center;
}
.portrait p {
  font-family:"ArchiveCond",sans-serif;
  font-size: 1rem;
  color: var(--acid);
  opacity: 0.85;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .team-container {
    gap: 1.5rem;
  }
  .portrait {
    width: 180px;
    padding: 1rem 0.5rem 1rem;
  }
  .portrait img {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 767px) {
  #team {
    padding: 6vh var(--gutter-x) 2vh;
  }
  .team-container {
    gap: 1rem;
  }
  .portrait {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 1rem 0.5rem 1rem;
  }
  .portrait img {
    width: 100px;
    height: 100px;
  }
}

header.social social a {
  position: relative;
  display: inline-block;
  transition: opacity .3s;
}
header.social social a::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--acid);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  margin-top: 2px;
}
header.social social a:hover::after {
  transform: scaleX(1);
}

/* -------- GLOBAL GLASS CARD -------- */
.glass-card{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.4);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  transition:transform .25s, box-shadow .25s, opacity .25s;
}
.glass-card:hover{
  transform:translateY(-4px) scale(1.025);
  box-shadow:0 10px 32px rgba(0,0,0,.55);
}

/* -------- SECTION HEADING -------- */
.content-block h2{
  font-family:"ArchiveCond",sans-serif;
  font-size:clamp(1.1rem,1.5vw + .5rem,2rem);
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--accent);
  margin:0 0 2.2rem;
  position:relative;
}
.content-block h2::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  width:40px;height:2px;
  background:var(--accent);
}

/* ===== NAV accent underline ===== */
header.nav nav a::after{
  background:var(--accent);
}

/* ===== GRID card underline ===== */
.item h2::after {
  background: var(--accent);
}

/* ===== PORTRAITS ===== */
.portrait {
  width: clamp(200px, 22vw, 300px);
  padding: 0 0 1.25rem;
  overflow: hidden; /* allow image to bleed */
  background:var(--glass);
  color: var(--acid);
  border-radius: 10px;
  /* glass-card behaviour */
  /* duplicate here to avoid extra class */
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.35);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
  transition:transform .25s, box-shadow .25s, opacity .25s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.96;
}
.portrait:hover {
  transform:translateY(-4px) scale(1.03);
  box-shadow:0 10px 32px rgba(0,0,0,.55);
  opacity: 1;
}
.portrait img {
  width: 100%;
  height: auto;
  border-radius: 0;
  object-fit: cover;
  margin: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  background: var(--slate);
  display: block;
}
.portrait h3 {
  font-family: "ArchiveCond", sans-serif;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
  margin-top: 0;
  color: var(--hot);
  text-shadow: 0 0 2px var(--acid);
  font-weight: 500;
  text-align: center;
}
.portrait p {
  font-family:"ArchiveCond",sans-serif;
  font-size: 1rem;
  color: var(--acid);
  opacity: 0.85;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

@media (max-width: 1024px) {
  .team-container {
    gap: 1.5rem;
  }
  .portrait {
    width: 180px;
    padding: 1rem 0.5rem 1rem;
  }
  .portrait img {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 767px) {
  #team {
    padding: 6vh var(--gutter-x) 2vh;
  }
  .team-container {
    gap: 1rem;
  }
  .portrait {
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    padding: 1rem 0.5rem 1rem;
  }
  .portrait img {
    width: 100px;
    height: 100px;
  }
}

header.social social a {
  position: relative;
  display: inline-block;
  transition: opacity .3s;
}
header.social social a::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--acid);
  transform: scaleX(0);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
  margin-top: 2px;
}
header.social social a:hover::after {
  transform: scaleX(1);
}

/* ===== PIPELINE, FAQ, PROJECT GLASS ===== */
.faq-list details,
.project-section{
  background:var(--glass);
  border:1px solid rgba(255,255,255,.06);
  box-shadow:0 4px 18px rgba(0,0,0,.38);
  backdrop-filter:blur(var(--blur));
  -webkit-backdrop-filter:blur(var(--blur));
}

/* Contact info */
.contact-info{
  margin:2em 0 4vh;text-align:center;font-size:1rem;opacity:.7;
  font-family:"SpaceMono",monospace;
}
.contact-info a{color:var(--accent);}

/* === BACK TO TOP BUTTON === */
.back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity .3s, transform .3s, background .3s;

  /* Glass card style */
  background: var(--glass);
  border: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
}

.back-to-top.visible {
  opacity: .8;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  opacity: 1;
  background: var(--accent);
}

.back-to-top svg {
  width: 24px;
  height: 24px;
  stroke: var(--accent);
  transition: stroke .3s;
}

.back-to-top:hover svg {
  stroke: var(--slate);
}

/* === PAGE LOADER === */
#loader-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:9999;
  transition:opacity .6s;
}
#loader-overlay.hide{opacity:0;pointer-events:none;}
.spinner{
  width:72px;height:72px;
  border:6px solid rgba(255,255,255,.15);
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== HERO PARALLAX REFINEMENT ===== */
.hero{
  position:relative;
  height:100vh;
  margin-top:-15vh; /* Remove negative margin to bring video to top */
  overflow:hidden;
  z-index:1;
}
/* Video as moveable box that behaves as background */
.hero video{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:120vh;
  object-fit:cover;
  z-index:-2;
  pointer-events:none;
  transform:translateY(-100vh);
  transition:transform 0.1s ease-out;
}
/* Gradient overlay - separate from video, controlled by scroll */
.hero::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:200vh; /* further extend to mask bottom edge even during video movement */
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 50%,rgba(0,0,0,1) 100%);
  z-index:-1;
  opacity:var(--gradient-opacity,100%);
  transition:opacity 0.3s;
}

/* Dynamic about section padding */
#about.content-block {
  margin-top: 15vh; /* Start with large padding */
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  transition: margin-top 0.5s ease-out;
}

/* When about reaches top, reduce padding */
#about.content-block.reduced-padding {
  margin-top: -50rem;
}

/* Projects grid spacing */
#projects.grid {
  margin-bottom: 4.5rem;
  transition: margin-top 0.5s ease-out;
}

/* Content that scrolls over the video */
.content-wrapper {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Remove black background from content sections */
.content-block, .section, main.grid {
  background: transparent;
  position: relative;
  z-index: 2;
}

/* ===== CONTACT FORM REFINEMENTS ===== */
.form-message{
  margin-top:1em;
  padding:1em;
  border-radius:6px;
  font-family:"SpaceMono",monospace;
  font-size:1.1em;
  text-align:center;
  display:none; /* initially hidden */
}
.form-message.success{background:#1a3d1a;color:#b6ffb6;border:1px solid #3c6;}
.form-message.error  {background:#3d1a1a;color:#ffb6b6;border:1px solid #c66;}
.honeypot{display:none;}

/* Form layout helpers */
.form-row{display:flex;gap:1em;flex-wrap:wrap;}
.form-col{flex:1 1 120px;min-width:120px;}

@media(max-width:600px){
  #contact{padding:4vh 8px 2vh;font-size:1rem;}
  #contact form label,
  #contact form input,
  #contact form textarea{font-size:1em;}
}