@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500&family=Inter:wght@400;500&display=swap');

:root{
  --cream:#FAF6EF;
  --cream-deep:#F0E9DC;
  --taupe:#947268;
  --taupe-light:#B79E93;
  --charcoal:#3D3630;
  --charcoal-soft:#6B6259;
  --line:#D8CFC2;
  --maxw:1080px;
}

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

html{scroll-behavior:smooth;}

body{
  background-color:var(--cream);
  background-image:
    linear-gradient(rgba(250,246,239,0.55), rgba(250,246,239,0.55)),
    url('assets/bg-texture.jpg');
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  background-repeat:no-repeat;
  color:var(--charcoal);
  font-family:'Inter',sans-serif;
  font-weight:400;
  line-height:1.7;
  font-size:16px;
}

h1,h2,h3{
  font-family:'Fraunces',serif;
  font-weight:400;
  color:var(--charcoal);
  letter-spacing:0.3px;
}

h1{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.15;}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem);line-height:1.25;}
h3{font-size:1.2rem;}

a{color:inherit;text-decoration:none;}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--taupe);
  font-weight:500;
}

.rule{
  width:44px;
  height:1px;
  background:var(--taupe);
  border:none;
  margin:1.25rem 0;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}

/* Nav */
header.site{
  padding:28px 0;
  border-bottom:1px solid var(--line);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:'Fraunces',serif;font-size:1.25rem;letter-spacing:1px;}
.logo span{display:block;font-family:'Inter',sans-serif;font-size:0.62rem;letter-spacing:3px;color:var(--taupe);text-transform:uppercase;margin-top:2px;}
nav.links{display:flex;gap:2.2rem;font-size:0.85rem;}
nav.links a{color:var(--charcoal-soft);transition:color .2s;}
nav.links a:hover,nav.links a.active{color:var(--taupe);}
.nav-cta{border:1px solid var(--charcoal);padding:9px 20px;font-size:0.8rem;letter-spacing:0.5px;transition:background .2s,color .2s;}
.nav-cta:hover{background:var(--charcoal);color:var(--cream);}

/* Hero photography placeholder block */
.photo-block{
  background:
    repeating-linear-gradient(135deg, var(--taupe-light) 0px, var(--taupe-light) 1px, transparent 1px, transparent 14px),
    var(--cream-deep);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--charcoal-soft);
  font-size:0.72rem;
  letter-spacing:2px;
  text-transform:uppercase;
  text-align:center;
  padding:1rem;
}

/* Sections */
section{padding:88px 0;}
section.tight{padding:56px 0;}
.section-head{max-width:640px;margin-bottom:3rem;}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center;}

/* Buttons */
.btn{
  display:inline-block;
  padding:13px 28px;
  font-size:0.85rem;
  letter-spacing:0.5px;
  border:1px solid var(--charcoal);
  transition:background .2s,color .2s;
}
.btn.primary{background:var(--charcoal);color:var(--cream);}
.btn.primary:hover{background:var(--taupe);border-color:var(--taupe);}
.btn.ghost:hover{background:var(--charcoal);color:var(--cream);}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:1.75rem;}

/* Cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--line);}
.card{background:var(--cream);padding:2.5rem 2rem;}
.card h3{margin-bottom:0.9rem;}
.card p{color:var(--charcoal-soft);font-size:0.95rem;}

/* Footer */
footer.site{border-top:1px solid var(--line);padding:48px 0;margin-top:60px;}
footer.site .wrap{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:2rem;}
footer.site .cols{display:flex;gap:4rem;flex-wrap:wrap;}
footer.site h4{font-size:0.72rem;letter-spacing:2px;text-transform:uppercase;color:var(--taupe);margin-bottom:0.9rem;}
footer.site a{display:block;font-size:0.88rem;color:var(--charcoal-soft);margin-bottom:0.5rem;}
footer.site a:hover{color:var(--taupe);}
.copyright{font-size:0.78rem;color:var(--charcoal-soft);margin-top:2.5rem;}

/* Utility */
.text-soft{color:var(--charcoal-soft);}
.note-box{background:var(--cream-deep);border:1px solid var(--line);padding:2rem;font-size:0.95rem;color:var(--charcoal-soft);}
.form-field{width:100%;padding:12px 14px;border:1px solid var(--line);background:var(--cream);font-family:'Inter',sans-serif;font-size:0.95rem;color:var(--charcoal);margin-bottom:1rem;}
.form-field:focus{outline:none;border-color:var(--taupe);}
label{display:block;font-size:0.78rem;letter-spacing:1px;text-transform:uppercase;color:var(--charcoal-soft);margin-bottom:0.4rem;}

@media(max-width:800px){
  nav.links{display:none;}
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
  footer.site .wrap{flex-direction:column;}
}

/* Capabilities breakdown (portfolio page) */
.cap-block{
  border-top:1px solid var(--line);
  padding:2.75rem 0;
  display:grid;
  grid-template-columns:280px 1fr;
  gap:2.5rem;
}
.cap-block:last-of-type{border-bottom:1px solid var(--line);}
.cap-block-head p{color:var(--charcoal-soft);font-size:0.92rem;margin-top:0.6rem;}
.cap-jumplink{margin-top:1rem;}
.cap-jumplink a{font-size:0.78rem;letter-spacing:0.5px;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid var(--taupe);padding-bottom:1px;}
.cap-list{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:0.6rem 1.75rem;}
.cap-list li{font-size:0.92rem;color:var(--charcoal-soft);line-height:1.5;padding-left:1rem;position:relative;}
.cap-list li::before{content:"";position:absolute;left:0;top:0.55em;width:5px;height:5px;background:var(--taupe);border-radius:50%;}

/* Live model example cards */
.model-card{background:var(--cream);padding:2.5rem 2rem;display:flex;flex-direction:column;transition:background .2s;}
.model-card:hover{background:var(--cream-deep);}
.model-card h3{margin-bottom:0.7rem;}
.model-card p{color:var(--charcoal-soft);font-size:0.92rem;flex-grow:1;margin-bottom:1.25rem;}
.model-card .cta{font-size:0.78rem;letter-spacing:0.5px;text-transform:uppercase;color:var(--taupe);}
.model-card .num{font-size:0.72rem;letter-spacing:2px;color:var(--taupe-light);margin-bottom:1rem;display:block;}

@media(max-width:800px){
  .cap-block{grid-template-columns:1fr;gap:1rem;}
  .cap-list{grid-template-columns:1fr;}
}