/* Craft Table Studios — Weblayouts_v2key-inspired scroll with photo backgrounds */
:root{
  --fg:#2c2c2c;
  --muted:#6a6a6a;
  --line:#8c8c8c;
  --max:1180px;
  --pad:34px;
  --navh:82px;
  --bgOpacity:.20; /* 20% */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--fg);
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight:400;
  line-height:1.5;
  background:#f6f6f6;
}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--max); margin:0 auto; padding:0 var(--pad);}

/* Fixed top bar */
header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--navh);
  z-index:1000;
  background:rgba(255,255,255,.65);
  backdrop-filter: blur(10px);
}
.headerInner{
  height:var(--navh);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding-bottom:14px;
}
.brand{
  font-size:56px;
  font-weight:300;
  letter-spacing:-.02em;
}
.navlinks{display:flex; gap:18px; align-items:flex-end; font-size:18px;}
.navlinks a.active{font-weight:700}
.headerRule{border-top:2px solid rgba(140,140,140,.75);}

main{padding-top:calc(var(--navh) + 2px);}
.snap{scroll-snap-type:y mandatory;}

/* Panels */
.panel{
  position:relative;
  min-height: calc(100vh - var(--navh) - 2px);
  display:flex;
  align-items:center;
  scroll-snap-align:start;
  scroll-margin-top: calc(var(--navh) + 14px);
  padding:64px 0;
  overflow:hidden;
}
/* Background image layer */
.panel::before{
  content:"";
  position:absolute;
  inset:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:var(--bgOpacity);
  filter: grayscale(1) contrast(1.05);
  transform: scale(1.02);
}
/* Soft wash overlay for legibility */
.panel::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.92));
}
.panel > .container{position:relative; z-index:2;}

.heroLine{margin-top:22px; border-top:2px solid rgba(140,140,140,.75);}
.heroText{font-size:36px; font-weight:400; margin:34px 0 0 0;}
.sectionTitle{font-size:56px; font-weight:300; letter-spacing:-.02em; margin:0;}
.copy{margin-top:26px; max-width:92ch; font-size:18px;}

.reveal{opacity:0; transform: translateY(12px); transition: opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform: translateY(0);}

.foundersStack{margin-top:28px; display:grid; gap:24px; max-width:120ch;}
.founderName{font-size:20px; font-weight:700; margin:0 0 10px 0;}
.founderBio{margin:0; font-size:18px;}

.contactCard{
  margin-top:26px;
  background:rgba(255,255,255,.72);
  border:2px solid rgba(140,140,140,.55);
  border-radius:10px;
  padding:26px;
  max-width:860px;
}
.contactLead{font-size:20px; font-weight:700; margin:0;}
.contactSub{margin:4px 0 18px 0; color:var(--muted);}

.form{display:grid; gap:14px;}
.row{display:grid; grid-template-columns: 1fr 1fr 1fr; gap:16px;}
@media (max-width: 900px){
  .brand{font-size:42px}
  .row{grid-template-columns:1fr}
}

label{display:block; font-size:14px; font-weight:700; color:var(--muted); margin:0 0 6px 0;}
input, textarea{
  width:100%;
  padding:12px 12px;
  border:2px solid rgba(120,120,120,.55);
  background:rgba(245,245,245,.85);
  border-radius:10px;
  font-family:inherit;
  font-size:16px;
}
textarea{min-height:170px; resize:vertical;}
.actions{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
button{
  padding:10px 16px;
  border-radius:999px;
  border:2px solid rgba(120,120,120,.7);
  background:rgba(240,240,240,.85);
  color:var(--fg);
  font-weight:700;
  cursor:pointer;
}
button:hover{filter: brightness(.98);}
.footer{text-align:center; padding:18px 0 26px; color:rgba(120,120,120,.85); font-size:14px;}
.footer a{color:rgba(120,120,120,.85);}

/* Assign per-panel backgrounds */
#home::before{background-image:url("assets/bg-home.jpg");}
#about::before{background-image:url("assets/bg-about.jpg");}
#who::before{background-image:url("assets/bg-about.jpg");}
#contact::before{background-image:url("assets/bg-contact.jpg");}


/* Founder layout (minimal addition) */
.founderRow{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap:20px;
  align-items:start;
  margin-top:20px;
}
.founderImg{
  width:160px;
  height:auto;
  border-radius:8px;
  filter: grayscale(1);
}
@media (max-width: 920px){
  .founderRow{grid-template-columns:1fr}
  .founderImg{width:140px}
}