/* Nicholas Modroo Designs — shared stylesheet
   Used by the service/interior pages. The homepage (index.html) keeps its own
   inline styles; this file mirrors them so the sub-pages match exactly. */

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#f5f0e8;
  --stone:#c8b99a;
  --charcoal:#1e1e1c;
  --dark:#141412;
  --mid:#3a3834;
  --accent:#8a7355;
  --white:#fdfcf9;
}
html{scroll-behavior:smooth}
body{background:var(--dark);color:var(--cream);font-family:'Jost',sans-serif;font-weight:300;overflow-x:hidden}

nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:1.5rem 3rem;transition:background 0.4s;background:rgba(20,20,18,0.92);backdrop-filter:blur(12px)}
.nav-logo{font-family:'Cormorant Garamond',serif;font-size:1.1rem;font-weight:400;letter-spacing:0.18em;text-transform:uppercase;color:var(--cream);text-decoration:none}
.nav-logo span{color:var(--stone)}
.nav-links{display:flex;gap:2.5rem;list-style:none}
.nav-links a{color:var(--cream);text-decoration:none;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;opacity:0.75;transition:opacity 0.2s}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--stone)}
.nav-cta{font-size:0.7rem;letter-spacing:0.18em;text-transform:uppercase;border:0.5px solid rgba(200,185,154,0.5);padding:0.55rem 1.5rem;color:var(--stone);text-decoration:none;transition:all 0.25s}
.nav-cta:hover{background:var(--stone);color:var(--dark)}
.nav-phone{font-size:0.72rem;letter-spacing:0.16em;color:var(--stone);text-decoration:none;margin-right:1.5rem;opacity:0.85;transition:opacity 0.2s}
.nav-phone:hover{opacity:1}

/* Sub-page hero (shorter than the homepage hero) */
.subhero{position:relative;height:62vh;min-height:440px;display:flex;align-items:flex-end;overflow:hidden}
.subhero-bg{position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;filter:brightness(0.5)}
.subhero-overlay{position:absolute;inset:0;background:linear-gradient(to top, rgba(20,20,18,0.95) 0%, rgba(20,20,18,0.25) 55%, rgba(20,20,18,0.15) 100%)}
.subhero-content{position:relative;z-index:2;padding:0 3rem 4rem;max-width:920px}
.subhero-eyebrow{font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--stone);margin-bottom:1.1rem;opacity:0.9}
.subhero-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2.6rem,5.5vw,5rem);font-weight:300;line-height:1.04;color:var(--white);margin-bottom:1.25rem}
.subhero-title em{font-style:italic;color:var(--stone)}
.subhero-sub{font-size:0.9rem;letter-spacing:0.1em;color:rgba(245,240,232,0.7);max-width:560px;line-height:1.95}

/* Breadcrumb */
.crumb{position:static;background:none;backdrop-filter:none;display:block;z-index:auto;max-width:1200px;margin:0 auto;padding:1.5rem 3rem 0;font-size:0.66rem;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,240,232,0.45)}
.crumb a{color:rgba(245,240,232,0.6);text-decoration:none}
.crumb a:hover{color:var(--stone)}

section{padding:6rem 3rem}
.section-label{font-size:0.65rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--stone);margin-bottom:1rem}
.section-title{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:300;line-height:1.15;color:var(--cream)}
.section-title em{font-style:italic;color:var(--stone)}
.divider{width:40px;height:0.5px;background:var(--stone);margin:1.75rem 0}

.prose{max-width:760px}
.prose p{font-size:0.98rem;line-height:2;color:rgba(245,240,232,0.74);margin-bottom:1.5rem}
.prose p strong{color:var(--cream);font-weight:400}

/* Feature grid (reuses the homepage service-card look) */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5px;max-width:1200px;margin:3.5rem auto 0;background:rgba(200,185,154,0.15)}
.feature-card{background:var(--charcoal);padding:2.75rem 2.25rem;transition:background 0.3s}
.feature-card:hover{background:var(--mid)}
.feature-icon{font-size:1.4rem;color:var(--stone);margin-bottom:1.25rem}
.feature-name{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:400;color:var(--cream);margin-bottom:0.9rem}
.feature-desc{font-size:0.82rem;line-height:1.9;color:rgba(245,240,232,0.55)}

/* Project strip */
.proj-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;max-width:1200px;margin:3rem auto 0}
.proj-tile{position:relative;height:300px;overflow:hidden;text-decoration:none;display:block}
.proj-tile img{width:100%;height:100%;object-fit:cover;transition:transform 0.6s ease,filter 0.4s}
.proj-tile:hover img{transform:scale(1.04);filter:brightness(0.6)}
.proj-tile-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(20,20,18,0.9) 0%,transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.5rem}
.proj-tile-loc{font-size:0.6rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--stone);margin-bottom:0.35rem}
.proj-tile-name{font-family:'Cormorant Garamond',serif;font-size:1.25rem;color:var(--white)}

/* FAQ */
.faq{max-width:820px;margin:3rem auto 0}
.faq-item{border-top:0.5px solid rgba(200,185,154,0.18);padding:1.75rem 0}
.faq-item:last-child{border-bottom:0.5px solid rgba(200,185,154,0.18)}
.faq-q{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:400;color:var(--cream);margin-bottom:0.75rem}
.faq-a{font-size:0.9rem;line-height:1.95;color:rgba(245,240,232,0.65)}

/* CTA band */
.cta-band{background:var(--charcoal);text-align:center;padding:6rem 3rem}
.cta-band h2{font-family:'Cormorant Garamond',serif;font-size:clamp(2rem,4vw,3.2rem);font-weight:300;color:var(--cream);margin-bottom:1.5rem}
.cta-band h2 em{font-style:italic;color:var(--stone)}
.cta-band p{font-size:0.92rem;line-height:1.9;color:rgba(245,240,232,0.6);max-width:560px;margin:0 auto 2.5rem}

.btn-primary{background:var(--stone);color:var(--dark);text-decoration:none;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;padding:1rem 2.5rem;transition:all 0.25s;display:inline-block}
.btn-primary:hover{background:var(--cream)}
.btn-ghost{color:var(--cream);text-decoration:none;font-size:0.72rem;letter-spacing:0.2em;text-transform:uppercase;opacity:0.65;border-bottom:0.5px solid transparent;padding-bottom:2px;transition:all 0.25s}
.btn-ghost:hover{opacity:1;border-bottom-color:var(--stone)}
.btn-row{display:flex;gap:1.5rem;align-items:center;margin-top:2.25rem;flex-wrap:wrap}

footer{background:var(--dark);border-top:0.5px solid rgba(200,185,154,0.12);padding:3rem;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-logo{font-family:'Cormorant Garamond',serif;font-size:1rem;font-weight:400;letter-spacing:0.15em;text-transform:uppercase;color:var(--stone)}
.footer-copy{font-size:0.68rem;letter-spacing:0.1em;color:rgba(245,240,232,0.3)}
.footer-links{display:flex;gap:2rem;flex-wrap:wrap}
.footer-links a{font-size:0.65rem;letter-spacing:0.2em;text-transform:uppercase;color:rgba(245,240,232,0.35);text-decoration:none;transition:color 0.2s}
.footer-links a:hover{color:var(--stone)}

@media(max-width:768px){
  nav{padding:1.25rem 1.5rem}
  .nav-links{display:none}
  .nav-phone{display:none}
  .subhero-content{padding:0 1.5rem 3rem}
  section{padding:4.5rem 1.5rem}
  .crumb{padding:1.25rem 1.5rem 0}
  .feature-grid{grid-template-columns:1fr}
  .proj-strip{grid-template-columns:1fr 1fr}
  footer{flex-direction:column;gap:1.5rem;text-align:center;padding:2rem 1.5rem}
  .footer-links{justify-content:center;gap:1.5rem}
  .cta-band{padding:4.5rem 1.5rem}
}

/* ===== Project case-study pages ===== */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;max-width:1100px;margin:0 auto;border-top:0.5px solid rgba(200,185,154,0.22);border-bottom:0.5px solid rgba(200,185,154,0.22);padding:2.25rem 0}
.fact-label{font-size:0.6rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--stone);margin-bottom:0.4rem}
.fact-val{font-size:0.9rem;color:rgba(245,240,232,0.8);line-height:1.5}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-width:1200px;margin:3rem auto 0}
.gallery figure{margin:0;overflow:hidden}
.gallery img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;transition:transform 0.6s ease,filter 0.4s}
.gallery figure:hover img{transform:scale(1.03);filter:brightness(0.9)}
.gallery .wide{grid-column:span 2}
.gallery .wide img{aspect-ratio:16/7}
.press-list{display:flex;flex-direction:column;gap:0.9rem;max-width:760px}
.press-list a{font-size:0.92rem;color:var(--stone);text-decoration:none;border-bottom:0.5px solid transparent;transition:border-color 0.2s;width:fit-content}
.press-list a:hover{border-bottom-color:var(--stone)}
@media(max-width:768px){
  .facts{grid-template-columns:1fr 1fr;gap:1.25rem}
  .gallery{grid-template-columns:1fr}
  .gallery .wide{grid-column:span 1}
}