/* ============================================================
   Habil Percu — design system
   ============================================================ */

:root{
  --color-bg: #F5F0E8;
  --color-surface: #FFFFFF;
  --color-text: #231F1A;
  --color-muted: #8A8078;
  --color-accent: #B08A4E;
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Manrope', -apple-system, Segoe UI, sans-serif;
  --container: 1240px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
}

body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{
  font-family:var(--font-display);
  font-weight:500;
  margin:0;
  letter-spacing:-0.01em;
}

p{margin:0 0 1em;}
a{color:inherit;text-decoration:none;}

.sr-only{
  position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0,0,0,0);
}

.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--color-text);color:#fff;padding:.6em 1em;
  z-index:200;
}
.skip-link:focus{left:1rem;top:1rem;}

/* ---------- eyebrow / signature brass rule ---------- */
.eyebrow{
  position:relative;
  display:inline-block;
  padding-top:1.1em;
  margin-bottom:.9em;
  font-family:var(--font-body);
  font-size:.72rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--color-accent);
}
.eyebrow::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:52px;height:1px;
  background:var(--color-accent);
}
.eyebrow--light{color:#D9C9A9;}
.eyebrow--light::before{background:#D9C9A9;}

/* ---------- header / nav ---------- */
.site-header{
  position:absolute;
  top:0;left:0;right:0;
  z-index:50;
  padding:1.4rem 0;
}
.site-header__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 6vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.wordmark{
  font-family:var(--font-display);
  font-size:1.2rem;
  letter-spacing:.02em;
  color:var(--color-text);
}
.site-header .wordmark{color:#F5F0E8;}
.site-header--solid{position:relative;background:var(--color-bg);padding:1.2rem 0;}
.site-header--solid .wordmark{color:var(--color-text);}

.site-nav{
  display:flex;
  gap:1.8rem;
  flex-wrap:wrap;
}
.site-nav a{
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:#F5F0E8;
  padding:.3em 0;
  border-bottom:1px solid transparent;
  transition:border-color .3s ease, opacity .3s ease;
}
.site-header--solid .site-nav a{color:var(--color-text);}
.site-nav a:hover, .site-nav a:focus{border-color:var(--color-accent);}

.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:0;
  padding:.4em;
  cursor:pointer;
}
.nav-toggle span{
  width:24px;height:1.5px;
  background:#F5F0E8;
  display:block;
}
.site-header--solid .nav-toggle span{background:var(--color-text);}

@media (max-width:860px){
  .nav-toggle{display:flex;}
  .site-nav{
    position:fixed;
    inset:0 0 0 auto;
    width:min(320px,80vw);
    background:var(--color-text);
    flex-direction:column;
    gap:0;
    padding:6rem 2rem 2rem;
    transform:translateX(100%);
    transition:transform .4s ease;
  }
  .site-nav.is-open{transform:translateX(0);}
  .site-nav a{
    color:#F5F0E8;
    padding:.9em 0;
    border-bottom:1px solid rgba(245,240,232,.12);
  }
}

/* ---------- generic section spacing ---------- */
section{position:relative;}
.container{max-width:var(--container);margin:0 auto;padding:0 6vw;}

/* ---------- reveal animation ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1);
}
[data-reveal].is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{opacity:1;transform:none;transition:none;}
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:92vh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:#1a1611;
}
.hero__media{position:absolute;inset:0;}
.hero__media img{
  width:100%;height:100%;object-fit:cover;
  transform:scale(1.04);
  transition:transform 1.6s ease;
}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(26,22,17,.05) 30%, rgba(26,22,17,.72) 100%);
}
.hero__content{
  position:relative;z-index:2;
  padding:0 6vw 9vh;
  max-width:620px;
  color:#F5F0E8;
}
.hero__content h1{
  font-size:clamp(2.1rem,5.2vw,3.7rem);
  line-height:1.06;
  margin:.3em 0;
}
.hero__content h1 em{
  font-style:italic;
  color:var(--color-accent);
}
.hero__lede{
  font-size:1.02rem;
  color:#E6DCCB;
  max-width:460px;
  margin-bottom:1.4em;
}
@media (max-width:720px){
  .hero{min-height:80vh;}
}

.cta-link{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  color:inherit;
  border-bottom:1px solid var(--color-accent);
  padding-bottom:.3em;
  transition:letter-spacing .3s ease, gap .3s ease;
}
.cta-link span{transition:transform .3s ease;}
.cta-link:hover span, .cta-link:focus span{transform:translateX(5px);}

/* ---------- STATEMENT (asymmetric split) ---------- */
.statement__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vw;
  align-items:center;
  padding:13vh 6vw;
  max-width:var(--container);
  margin:0 auto;
}
.statement__text{max-width:520px;}
.statement__text h2{
  font-size:clamp(1.8rem,3.6vw,2.7rem);
  margin-bottom:.6em;
}
.statement__text h2 em{font-style:italic;color:var(--color-accent);}
.statement__text p{color:var(--color-text);max-width:460px;}
@media (max-width:860px){
  .statement__grid{grid-template-columns:1fr;padding:9vh 6vw;}
  .statement__spacer{display:none;}
}

/* ---------- OFFER / CRAFT (image + text, alternating) ---------- */
.split{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:0;
  align-items:stretch;
}
.split--reverse{grid-template-columns:.85fr 1.15fr;}
.split--reverse .split__media{order:2;}
.split--reverse .split__text{order:1;}
.split__media{overflow:hidden;min-height:520px;background:#e9e1d2;}
.split__media img{width:100%;height:100%;object-fit:cover;}
.split__text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:4rem 6vw;
  max-width:480px;
}
.split__text h2{font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.6em;}
.split__text h2 em{font-style:italic;color:var(--color-accent);}
@media (max-width:860px){
  .split, .split--reverse{grid-template-columns:1fr;}
  .split--reverse .split__media, .split--reverse .split__text{order:initial;}
  .split__media{min-height:340px;}
  .split__text{padding:3rem 6vw;}
}

/* ---------- FULLBLEED ---------- */
.fullbleed{position:relative;background:#151210;}
.fullbleed img{
  width:100%;height:84vh;object-fit:cover;display:block;
}
.fullbleed__caption{
  position:absolute;left:6vw;bottom:6vh;
  color:#F5F0E8;max-width:420px;
}
.fullbleed__caption .museum-label{
  display:block;
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.7rem;
  color:var(--color-accent);
  margin-bottom:.5em;
}
.fullbleed__caption p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.5rem;
  margin:0;
}
@media (max-width:720px){
  .fullbleed img{height:60vh;}
}

/* ---------- GALLERY (staggered masonry) ---------- */
.gallery-editorial{padding:12vh 0 10vh;}
.gallery-editorial__head{
  max-width:600px;
  padding:0 6vw;
  margin-bottom:5vh;
}
.gallery-editorial__head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.gallery-editorial__head h2 em{font-style:italic;color:var(--color-accent);}
.masonry{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.4rem;
  padding:0 6vw;
}
.masonry__item{margin:0;}
.masonry__item img{width:100%;height:auto;}
.masonry__item figcaption{
  margin-top:.7em;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--color-muted);
}
.masonry__item--b{margin-top:5rem;}
.masonry__item--c{margin-top:-2.5rem;}
.masonry__item--d{margin-top:2rem;}
@media (max-width:780px){
  .masonry{grid-template-columns:1fr;}
  .masonry__item--b,.masonry__item--c,.masonry__item--d{margin-top:0;}
}

/* ---------- FAQ ---------- */
.faq{padding:12vh 6vw;max-width:920px;margin:0 auto;}
.faq__head{max-width:560px;margin-bottom:4vh;}
.faq__head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.faq__head h2 em{font-style:italic;color:var(--color-accent);}
.faq__list details{
  border-top:1px solid rgba(35,31,26,.12);
  padding:1.4em 0;
}
.faq__list details:last-child{border-bottom:1px solid rgba(35,31,26,.12);}
.faq__list summary{
  cursor:pointer;
  font-family:var(--font-display);
  font-size:1.12rem;
  list-style:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1em;
}
.faq__list summary::-webkit-details-marker{display:none;}
.faq__list summary::after{
  content:'+';
  font-family:var(--font-body);
  color:var(--color-accent);
  font-size:1.3rem;
  flex-shrink:0;
}
.faq__list details[open] summary::after{content:'−';}
.faq__list p{
  margin-top:.9em;
  color:var(--color-muted);
  max-width:640px;
}

/* ---------- CTA ---------- */
.cta{position:relative;}
.cta__media{position:relative;height:78vh;overflow:hidden;}
.cta__media img{width:100%;height:100%;object-fit:cover;}
.cta__media::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(21,18,14,.78) 0%, rgba(21,18,14,.28) 55%, rgba(21,18,14,.1) 100%);
}
.cta__content{
  position:absolute;left:6vw;top:50%;transform:translateY(-50%);
  z-index:2;color:#F5F0E8;max-width:460px;
}
.cta__content h2{font-size:clamp(1.9rem,3.8vw,2.8rem);margin-bottom:.5em;}
.cta__content h2 em{font-style:italic;color:var(--color-accent);}
.cta__content p{color:#E6DCCB;}
.cta__content a.contact-line{
  display:block;
  margin-bottom:.4em;
  text-decoration:underline;
  text-decoration-color:rgba(245,240,232,.3);
}
@media (max-width:720px){
  .cta__media{height:70vh;}
}

/* ---------- generic page hero (interior pages) ---------- */
.page-hero{
  padding:16vh 6vw 8vh;
  max-width:var(--container);
  margin:0 auto;
}
.page-hero h1{font-size:clamp(2rem,4.4vw,3.1rem);max-width:760px;}
.page-hero h1 em{font-style:italic;color:var(--color-accent);}
.page-hero p{max-width:560px;color:var(--color-muted);font-size:1.05rem;}

/* ---------- text sections used on interior pages ---------- */
.text-block{
  max-width:640px;
  padding:8vh 6vw;
  margin:0 auto;
}
.text-block h2{font-size:clamp(1.7rem,3.2vw,2.3rem);margin-bottom:.7em;}
.text-block h2 em{font-style:italic;color:var(--color-accent);}
.text-block p{color:var(--color-text);}

.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vw;
  max-width:var(--container);
  margin:0 auto;
  padding:8vh 6vw;
}
@media (max-width:860px){
  .two-col{grid-template-columns:1fr;}
}
.two-col h3{font-size:1.3rem;margin-bottom:.5em;}
.two-col ul{padding-left:1.2em;margin:0;}
.two-col li{margin-bottom:.6em;color:var(--color-text);}

/* ---------- process steps ---------- */
.steps{
  max-width:var(--container);
  margin:0 auto;
  padding:8vh 6vw;
}
.steps__item{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:2rem;
  padding:2.4rem 0;
  border-top:1px solid rgba(35,31,26,.12);
}
.steps__item:last-child{border-bottom:1px solid rgba(35,31,26,.12);}
.steps__num{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.6rem;
  color:var(--color-accent);
}
.steps__item h3{font-size:1.3rem;margin-bottom:.4em;}
.steps__item p{color:var(--color-muted);max-width:560px;}
@media (max-width:600px){
  .steps__item{grid-template-columns:1fr;gap:.6rem;}
}

/* ---------- contact page ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4vw;
  max-width:var(--container);
  margin:0 auto;
  padding:6vh 6vw 12vh;
}
.contact-card{
  background:var(--color-surface);
  padding:2.6rem;
  border:1px solid rgba(35,31,26,.1);
}
.contact-card h3{font-size:1rem;text-transform:uppercase;letter-spacing:.1em;color:var(--color-muted);margin-bottom:1em;}
.contact-card p{font-size:1.1rem;margin-bottom:.3em;}
.contact-card a{border-bottom:1px solid var(--color-accent);}
@media (max-width:860px){
  .contact-grid{grid-template-columns:1fr;}
}

/* ---------- gallery page ---------- */
.gallery-page{
  max-width:var(--container);
  margin:0 auto;
  padding:6vh 6vw 12vh;
}
.gallery-page__lead{max-width:600px;margin-bottom:6vh;}
.gallery-page__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:3rem 2.4rem;
}
.gallery-page__item:nth-child(2){margin-top:4.5rem;}
.gallery-page__item:nth-child(3){margin-top:-1.5rem;}
.gallery-page__item:nth-child(5){margin-top:2rem;}
.gallery-page__item img{width:100%;height:auto;}
.gallery-page__item figcaption{
  margin-top:.8em;
  max-width:420px;
}
.gallery-page__item .museum-label{
  display:block;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--color-accent);
  margin-bottom:.3em;
}
.gallery-page__item .caption-text{color:var(--color-muted);font-size:.92rem;}
@media (max-width:780px){
  .gallery-page__grid{grid-template-columns:1fr;}
  .gallery-page__item{margin-top:0 !important;}
}

/* ---------- footer ---------- */
.site-footer{
  background:#1a1611;
  color:#EDE6D8;
  padding:8vh 6vw 3vh;
}
.site-footer__grid{
  max-width:var(--container);
  margin:0 auto;
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:3vw;
  padding-bottom:5vh;
  border-bottom:1px solid rgba(237,230,216,.14);
}
.wordmark--footer{font-size:1.3rem;color:#EDE6D8;margin-bottom:.4em;}
.site-footer__tag{color:#B7AB94;font-size:.9rem;}
.site-footer__col p{margin-bottom:.3em;color:#DED3BE;}
.site-footer__col a{border-bottom:1px solid rgba(176,138,78,.5);}
.site-footer__nav{display:flex;flex-direction:column;gap:.5em;}
.site-footer__base{
  max-width:var(--container);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.6em;
  padding-top:2.4vh;
  font-size:.78rem;
  color:#9C9080;
}
@media (max-width:860px){
  .site-footer__grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
  .site-footer__grid{grid-template-columns:1fr;}
}