:root{
  --black:#000000;
  --white:#ffffff;
  --crimson:#BB1919;
  --graphite:#6E675E;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:var(--black);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  min-height:100vh;
  padding:8vh 6vw 0;
  overflow-x:hidden;
  position:relative;
}

/* faint corner ruler ticks — brand texture, very subtle */
body::before, body::after{
  content:"";
  position:fixed;
  top:0; bottom:0;
  width:1px;
  background:linear-gradient(to bottom, transparent, rgba(255,255,255,0.06) 20%, rgba(255,255,255,0.06) 80%, transparent);
}
body::before{ left:6vw; }
body::after{ right:6vw; }

/* ---------- Language switcher ---------- */
.lang-switch{
  width:100%;
  max-width:640px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:0.45rem 0.85rem;
  margin-bottom:clamp(2rem, 5vh, 3.2rem);
  font-family:'Space Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.05em;
}
.lang-switch a{
  color:rgba(255,255,255,0.38);
  text-decoration:none;
  transition:color .2s;
  white-space:nowrap;
}
.lang-switch a:hover{ color:rgba(255,255,255,0.8); }
.lang-switch a.active{ color:var(--crimson); }
.lang-switch .sep{ color:rgba(255,255,255,0.14); }

.wrap{
  max-width:640px;
  width:100%;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:fadeUp 1.4s cubic-bezier(.16,1,.3,1) both;
}

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

.logo{
  width:min(72vw, 340px);
  height:auto;
  margin-bottom:clamp(2.5rem, 6vh, 4rem);
}

.eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.72rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:1.4rem;
}

h1{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size:clamp(2.1rem, 6vw, 3.6rem);
  line-height:1.18;
  letter-spacing:0.01em;
}
h1 .sub{
  display:block;
  font-style:italic;
  font-weight:400;
  color:rgba(255,255,255,0.72);
  font-size:0.56em;
  margin-top:0.5rem;
}

.divider{
  width:64px;
  height:1px;
  background:var(--crimson);
  margin:clamp(1.8rem, 4vh, 2.6rem) 0;
}

.lede{
  font-weight:300;
  font-size:1rem;
  line-height:1.7;
  color:rgba(255,255,255,0.85);
  max-width:440px;
}

.tagline{
  font-family:'Space Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-top:clamp(2.4rem, 5vh, 3.2rem);
}

.tagline em{
  font-style:normal;
  color:var(--crimson);
}

.about{
  width:100%;
  max-width:1040px;
  margin:0 auto;
  padding:0 6vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  animation:fadeUp 1.4s cubic-bezier(.16,1,.3,1) both;
}

.about .divider{ margin:clamp(3.6rem, 8vh, 5.2rem) 0 clamp(1.8rem, 4vh, 2.6rem); }

.about-eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:1rem;
}

.about-title{
  font-family:'Playfair Display', serif;
  font-weight:500;
  font-size:clamp(2.2rem, 6.4vw, 3.8rem);
  letter-spacing:0.01em;
  margin-bottom:clamp(2.6rem, 6vh, 3.6rem);
}

.about-strip{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(6px, 1.4vw, 14px);
  width:100%;
  margin-bottom:clamp(2.2rem, 5vh, 3rem);
}
.about-strip img{
  width:calc(25% - 11px);
  height:auto;
  display:block;
  border-radius:2px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,0.8);
}
.about-strip img:nth-child(2),
.about-strip img:nth-child(4){
  margin-top:clamp(26px, 6vw, 60px);
}

.about-copy{
  max-width:620px;
  display:flex;
  flex-direction:column;
  gap:1.15rem;
  font-weight:300;
  font-size:0.94rem;
  line-height:1.8;
  color:rgba(255,255,255,0.84);
  text-align:left;
}
.about-copy em{ font-style:italic; color:rgba(255,255,255,0.98); }

.about-caption{
  margin-top:clamp(1.6rem, 4vh, 2.2rem);
  font-family:'Space Mono', monospace;
  font-size:0.58rem;
  letter-spacing:0.09em;
  color:var(--graphite);
  text-transform:uppercase;
  line-height:1.7;
}

.about-caption-mobile{ display:none; }

.founder{
  margin-top:clamp(3.2rem, 7vh, 4.6rem);
  display:flex;
  flex-direction:column;
  align-items:center;
}

.founder-eyebrow{
  font-family:'Space Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--graphite);
  margin-bottom:1rem;
}

.founder-card{
  width:min(88vw, 500px);
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.7);
  overflow:hidden;
  transition:border-color .25s;
}
.founder-card:hover{ border-color:rgba(187,25,25,0.5); }
.founder-card img{
  display:block;
  width:100%;
  height:auto;
}

.founder-caption{
  margin-top:1rem;
  font-family:'Space Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.14em;
  color:rgba(255,255,255,0.5);
  text-transform:uppercase;
}

footer{
  width:100%;
  padding:2.4rem 6vw 2rem;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:0.5rem;
  font-family:'Space Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.06em;
  color:rgba(110,103,94,0.85);
  text-align:center;
}
footer a{
  color:rgba(255,255,255,0.65);
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.25);
  transition:color .2s, border-color .2s;
}
footer a:hover{
  color:var(--white);
  border-color:var(--crimson);
}

/* ---------- Mobile: tighter, cleaner, more editorial ---------- */
@media (max-width:640px){
  body{ padding:7vh 7vw 0; }

  .lang-switch{ font-size:0.58rem; gap:0.4rem 0.7rem; margin-bottom:1.6rem; }

  .logo{ width:min(56vw, 240px); margin-bottom:2.1rem; }

  .eyebrow{ font-size:0.6rem; letter-spacing:0.24em; margin-bottom:0.9rem; }

  h1{ font-size:1.95rem; line-height:1.24; }
  h1 .sub{ margin-top:0.4rem; }

  .divider{ margin:1.5rem 0; }

  .lede{ font-size:0.9rem; line-height:1.62; max-width:340px; }

  .tagline{ margin-top:1.9rem; font-size:0.58rem; letter-spacing:0.18em; }

  .about{ padding:0 7vw; }
  .about .divider{ margin:2.8rem 0 1.5rem; }
  .about-eyebrow{ font-size:0.58rem; letter-spacing:0.26em; margin-bottom:0.8rem; }
  .about-title{ font-size:2.05rem; margin-bottom:1.7rem; }

  .about-strip{
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:1.7rem;
  }
  .about-strip img{
    width:calc(50% - 4px);
    aspect-ratio:3 / 4;
    object-fit:cover;
    margin-top:0 !important;
    border-radius:4px;
  }
  /* focal point tuned per photo — a single blanket crop misframed each one */
  .about-strip img.ph-workshop{ object-position:center 32%; }
  .about-strip img.ph-founder{ object-position:center 10%; }
  .about-strip img.ph-site{ object-position:center 32%; }
  .about-strip img.ph-rooftop{ object-position:center 20%; }

  .about-copy{ font-size:0.88rem; line-height:1.66; gap:1rem; }

  .about-caption{ display:none; }
  .about-caption-mobile{
    display:block;
    margin-top:1.3rem;
    font-family:'Space Mono', monospace;
    font-size:0.56rem;
    letter-spacing:0.14em;
    color:var(--graphite);
    text-transform:uppercase;
  }

  .founder{ margin-top:2.8rem; }
  .founder-eyebrow{ font-size:0.58rem; letter-spacing:0.26em; margin-bottom:0.85rem; }
  .founder-card{ width:min(90vw, 380px); border-radius:8px; }
  .founder-caption{ font-size:0.58rem; margin-top:0.85rem; }

  footer{ font-size:0.56rem; padding:1.7rem 7vw 1.6rem; }
}