/* Fernhill & Stone — shared styles */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,500;1,9..144,600&family=Manrope:wght@400;500;700&display=swap');

:root{
  --forest:#1F3A2E;
  --moss:#55704C;
  --sand:#D9C4A1;
  --cream:#F6F1E7;
  --charcoal:#1A1C18;
  --terracotta:#B5633E;
  --radius-lg: 2rem;
  --radius-md: 1.5rem;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--cream);
  color:var(--charcoal);
  font-family:'Manrope',sans-serif;
  font-weight:400;
  line-height:1.6;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}

h1,h2,h3,.font-display{
  font-family:'Fraunces',serif;
  font-weight:600;
  line-height:1.1;
  margin:0;
}

em, .accent{
  font-style:italic;
  color:var(--terracotta);
}

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

.eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--moss);
}

.eyebrow.on-dark{color:var(--sand);}

.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 1.5rem;
}

.rounded-img{
  border-radius:var(--radius-lg);
  overflow:hidden;
}

/* --- paper grain overlay --- */
.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- buttons / pills --- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.85rem 1.6rem;
  border-radius:999px;
  font-weight:700;
  font-size:.92rem;
  border:1px solid transparent;
  cursor:pointer;
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{
  background:var(--terracotta);
  color:var(--cream);
}
.btn-primary:hover{
  background:#9c4f32;
  transform:translateY(-2px);
}
.btn-outline{
  background:transparent;
  color:inherit;
  border-color:currentColor;
}
.btn-outline:hover{
  background:var(--forest);
  color:var(--cream);
  border-color:var(--forest);
  transform:translateY(-2px);
}

/* --- floating pill nav --- */
.site-nav{
  position:fixed;
  top:1.1rem;
  left:50%;
  transform:translateX(-50%);
  z-index:100;
  width:min(94%, 920px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.6rem .7rem .6rem 1.3rem;
  border-radius:999px;
  background:transparent;
  color:var(--cream);
  transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-nav.solid{
  background:rgba(246,241,231,.92);
  color:var(--forest);
  box-shadow:0 10px 30px -10px rgba(26,28,24,.25);
  backdrop-filter:blur(10px);
}
.site-nav .brand{
  font-family:'Fraunces',serif;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.01em;
}
.site-nav .brand small{
  display:block;
  font-family:'Manrope',sans-serif;
  font-weight:500;
  font-size:.62rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.75;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:1.75rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav-links a{
  font-size:.88rem;
  font-weight:500;
  position:relative;
  padding:.25rem 0;
}
.nav-links a.active{
  font-weight:700;
}
.nav-links a.active::after{
  content:'';
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:var(--terracotta);
  border-radius:2px;
}
.nav-cta{
  display:inline-flex;
}
.nav-cta .btn{
  padding:.7rem 1.25rem;
  font-size:.82rem;
}
.site-nav:not(.solid) .btn-primary{
  background:var(--cream);
  color:var(--forest);
}
.site-nav:not(.solid) .btn-primary:hover{
  background:var(--terracotta);
  color:var(--cream);
}

.nav-toggle{
  display:none;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
  padding:.5rem;
}
.nav-toggle svg{display:block;width:22px;height:22px;}

/* mobile menu overlay */
.mobile-menu{
  position:fixed;
  inset:0;
  background:var(--forest);
  color:var(--cream);
  z-index:200;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.mobile-menu.open{
  opacity:1;
  visibility:visible;
}
.mobile-menu a{
  font-family:'Fraunces',serif;
  font-size:1.8rem;
  font-weight:500;
}
.mobile-menu a.active{color:var(--sand);}
.mobile-menu .btn{margin-top:1rem;}
.mobile-close{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  background:none;
  border:none;
  color:var(--cream);
  cursor:pointer;
  padding:.5rem;
}
.mobile-close svg{width:26px;height:26px;}

html.menu-open{overflow:hidden;}

@media (max-width: 760px){
  .nav-links, .nav-cta{display:none;}
  .nav-toggle{display:inline-flex;}
}

/* --- hero --- */
.hero{
  position:relative;
  min-height:100dvh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-gradient{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(31,58,46,.15) 0%, rgba(31,58,46,.35) 55%, rgba(26,28,24,.85) 100%);
}
.hero-content{
  position:relative;
  z-index:5;
  color:var(--cream);
  padding:7rem 1.5rem 4rem;
  width:100%;
}
.hero-content .wrap{max-width:900px;margin:0;}
.hero-headline{
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  margin:.6rem 0 1rem;
}
.hero-sub{
  font-size:1.05rem;
  max-width:36rem;
  opacity:.92;
  margin-bottom:1.75rem;
}
.hero-ctas{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
}

.page-hero{
  position:relative;
  min-height:46vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.page-hero .hero-content{padding:8rem 1.5rem 3rem;}
.page-hero .hero-headline{font-size:clamp(2.1rem, 5vw, 3.4rem);}

/* --- sections --- */
section{
  padding:5.5rem 0;
}
.section-head{
  max-width:40rem;
  margin-bottom:2.5rem;
}
.section-head h2{
  font-size:clamp(1.9rem, 3.4vw, 2.6rem);
  margin-top:.5rem;
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem;
  align-items:center;
}
.split img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;}
@media (max-width:820px){
  .split{grid-template-columns:1fr;gap:2rem;}
  .split img{aspect-ratio:3/2;}
}
.split.reverse .split-img{order:2;}
@media (max-width:820px){
  .split.reverse .split-img{order:0;}
}

/* manifesto */
.manifesto{
  background:var(--forest);
  color:var(--cream);
}
.manifesto-text{
  font-family:'Fraunces',serif;
  font-size:clamp(1.5rem, 3.2vw, 2.4rem);
  font-weight:500;
  line-height:1.5;
  max-width:52rem;
}
html.gsap-ready .manifesto-text .word{
  opacity:.15;
}
.manifesto-text .accent-word{
  font-style:italic;
  color:var(--terracotta);
}

/* cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.75rem;
}
@media (max-width:900px){
  .cards{grid-template-columns:1fr;}
}
.card{
  background:#fff;
  border-radius:var(--radius-md);
  overflow:hidden;
  box-shadow:0 20px 40px -24px rgba(26,28,24,.25);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 50px -20px rgba(26,28,24,.3);
}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.card-body{padding:1.5rem;}
.card-body h3{font-size:1.3rem;margin:.4rem 0 .6rem;}
.card-body p{margin:0 0 1rem;font-size:.92rem;color:#3c4036;}
.card-link{
  font-weight:700;
  font-size:.85rem;
  color:var(--moss);
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

/* parallax band */
.parallax-band{
  position:relative;
  height:60vh;
  min-height:360px;
  overflow:hidden;
  border-radius:var(--radius-lg);
  margin:0 auto;
  max-width:1180px;
  width:calc(100% - 3rem);
}
.parallax-band img{
  position:absolute;
  top:-15%;
  left:0;
  width:100%;
  height:130%;
  object-fit:cover;
}
.parallax-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(26,28,24,.15), rgba(26,28,24,.55));
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  text-align:center;
}
.parallax-overlay blockquote{
  font-family:'Fraunces',serif;
  font-style:italic;
  color:var(--cream);
  font-size:clamp(1.3rem, 3vw, 2.1rem);
  max-width:40rem;
  margin:0;
}

/* process steps */
.process{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:1.5rem;
}
@media (max-width:760px){
  .process{grid-template-columns:1fr 1fr;}
}
.process-step{
  text-align:center;
  padding:2rem 1rem;
  background:var(--sand);
  border-radius:var(--radius-md);
}
.process-step .num{
  font-family:'Fraunces',serif;
  font-style:italic;
  font-size:2rem;
  color:var(--terracotta);
  display:block;
  margin-bottom:.5rem;
}
.process-step h3{font-size:1.15rem;}

/* strip */
.strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
@media (max-width:760px){
  .strip{grid-template-columns:1fr;}
}
.strip img{width:100%;aspect-ratio:1/1;object-fit:cover;}

/* testimonial */
.testimonial{
  max-width:42rem;
  margin:0 auto;
  text-align:center;
}
.testimonial p.quote{
  font-family:'Fraunces',serif;
  font-size:1.5rem;
  font-style:italic;
}
.testimonial .cite{
  margin-top:1rem;
  font-size:.85rem;
  color:var(--moss);
  font-weight:700;
}
.testimonial .sample-label{
  display:block;
  font-size:.7rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#8a8a7c;
  margin-top:.3rem;
  font-weight:500;
}

/* CTA band */
.cta-band{
  background:var(--forest);
  color:var(--cream);
  border-radius:var(--radius-lg);
  margin:0 auto;
  max-width:1180px;
  width:calc(100% - 3rem);
  padding:3.5rem 2rem;
  text-align:center;
}
.cta-band h2{color:var(--cream);margin-bottom:1rem;}
.cta-band .btn-primary:hover{background:var(--sand);color:var(--forest);}

/* FAQ accordion */
.faq details{
  border-bottom:1px solid rgba(26,28,24,.15);
  padding:1.25rem 0;
}
.faq summary{
  font-family:'Fraunces',serif;
  font-size:1.15rem;
  cursor:pointer;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:'+';
  font-size:1.4rem;
  color:var(--terracotta);
  transition:transform .3s var(--ease);
}
.faq details[open] summary::after{
  transform:rotate(45deg);
}
.faq details p{
  margin:1rem 0 0;
  color:#3c4036;
  max-width:42rem;
}

/* services list */
.service-row{padding:4rem 0;}
.service-row .eyebrow{margin-bottom:.5rem;}
.price-tag{
  display:inline-block;
  margin-top:1rem;
  font-weight:700;
  color:var(--terracotta);
  font-size:.95rem;
}

/* gallery */
.masonry{
  column-count:3;
  column-gap:1.25rem;
}
@media (max-width:900px){.masonry{column-count:2;}}
@media (max-width:560px){.masonry{column-count:1;}}
.masonry-item{
  margin-bottom:1.25rem;
  break-inside:avoid;
  border-radius:var(--radius-md);
  overflow:hidden;
  position:relative;
  cursor:zoom-in;
}
.masonry-item img{width:100%;display:block;transition:transform .5s var(--ease);}
.masonry-item:hover img{transform:scale(1.04);}
.masonry-caption{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:1rem .9rem .8rem;
  background:linear-gradient(180deg, rgba(26,28,24,0), rgba(26,28,24,.85));
  color:var(--cream);
  font-size:.82rem;
  font-weight:500;
}
.masonry-item.is-hidden{display:none;}

.filter-chips{
  display:flex;
  gap:.6rem;
  flex-wrap:wrap;
  margin-bottom:2rem;
}
.chip{
  padding:.5rem 1.1rem;
  border-radius:999px;
  border:1px solid var(--moss);
  background:transparent;
  color:var(--moss);
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
  transition:background .25s var(--ease), color .25s var(--ease);
}
.chip.active, .chip:hover{
  background:var(--moss);
  color:var(--cream);
}

/* lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(26,28,24,.94);
  z-index:300;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
  opacity:0;
  visibility:hidden;
  transition:opacity .3s var(--ease), visibility .3s var(--ease);
}
.lightbox.open{opacity:1;visibility:visible;}
.lightbox img{
  max-width:90vw;
  max-height:80vh;
  border-radius:var(--radius-md);
  object-fit:contain;
}
.lightbox figcaption{
  color:var(--cream);
  text-align:center;
  margin-top:1rem;
  font-size:.9rem;
}
.lightbox-close{
  position:absolute;
  top:1.5rem;
  right:1.5rem;
  background:none;
  border:none;
  color:var(--cream);
  cursor:pointer;
}
.lightbox-close svg{width:28px;height:28px;}
.lightbox-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  background:rgba(246,241,231,.15);
  border:none;
  color:var(--cream);
  width:48px;height:48px;
  border-radius:50%;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-nav:hover{background:rgba(246,241,231,.3);}
.lightbox-prev{left:1.5rem;}
.lightbox-next{right:1.5rem;}

/* contact page */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3rem;
}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
}
.info-block{margin-bottom:2rem;}
.info-block h3{font-size:1.1rem;margin-bottom:.5rem;}
.info-block p{margin:.2rem 0;color:#3c4036;}
.map-link{
  color:var(--moss);
  font-weight:700;
  text-decoration:underline;
}

form.consult-form{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:2.25rem;
  box-shadow:0 20px 50px -30px rgba(26,28,24,.3);
}
.field{
  margin-bottom:1.25rem;
  display:flex;
  flex-direction:column;
  gap:.4rem;
}
.field label{
  font-size:.82rem;
  font-weight:700;
  color:var(--forest);
}
.field input, .field select, .field textarea{
  font-family:'Manrope',sans-serif;
  font-size:.95rem;
  padding:.75rem .9rem;
  border-radius:.8rem;
  border:1px solid #d9d4c6;
  background:var(--cream);
  color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--moss);
  outline-offset:1px;
}
.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
@media (max-width:500px){
  .form-row{grid-template-columns:1fr;}
}
.form-note{
  margin-top:1rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--terracotta);
  display:none;
}
.form-note.show{display:block;}

/* footer */
footer.site-footer{
  background:var(--forest);
  color:var(--cream);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:4rem 0 2rem;
  margin-top:2rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:2.5rem;
  margin-bottom:3rem;
}
@media (max-width:820px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:500px){
  .footer-grid{grid-template-columns:1fr;}
}
.footer-brand .font-display{font-size:1.5rem;margin-bottom:.5rem;}
.footer-brand p{opacity:.8;font-size:.9rem;max-width:22rem;}
.footer-col h4{
  font-size:.78rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:1rem;
  color:var(--sand);
}
.footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;font-size:.9rem;}
.footer-col a:hover{color:var(--sand);}
.footer-col p{font-size:.9rem;margin:.2rem 0;opacity:.85;}
.footer-bottom{
  border-top:1px solid rgba(246,241,231,.15);
  padding-top:1.5rem;
  font-size:.78rem;
  opacity:.7;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  justify-content:space-between;
}

/* reveal base state: content is visible by default (JS/CDN failure safe).
   Only when JS confirms GSAP loaded does it add .gsap-ready to <html>,
   which then hides [data-reveal] elements until GSAP reveals them. */
html.gsap-ready [data-reveal]{
  opacity:0;
  transform:translateY(28px);
}
html.reduced-motion[data-reveal],
html.reduced-motion [data-reveal]{
  opacity:1 !important;
  transform:none !important;
}