:root{
  --bg: #0e0b09;
  --bg-alt: #141010;
  --ink: #f3ece2;
  --ink-dim: #c9bfb1;
  --ink-faint: #8f8377;
  --brass: #c98f4a;
  --brass-bright: #e3ab63;
  --line: rgba(243,236,226,0.12);
  --wood: #7a5236;
  --radius: 2px;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.grain{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:999;
  opacity:0.035;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%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");
}

/* ---------- Header ---------- */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:linear-gradient(to bottom, rgba(14,11,9,0.92), rgba(14,11,9,0));
  padding:20px 0;
  transition:background .3s ease, padding .3s ease;
}
.site-header.scrolled{
  background:rgba(14,11,9,0.92);
  backdrop-filter:blur(10px);
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.brand{
  display:flex;
  align-items:baseline;
  gap:8px;
}
.brand-mark{
  font-family:var(--serif);
  font-weight:700;
  font-size:1.7rem;
  color:var(--brass-bright);
  letter-spacing:0.02em;
}
.brand-word{
  font-family:var(--sans);
  font-size:0.78rem;
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.nav{
  display:flex;
  gap:36px;
}
.nav a{
  font-size:0.82rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  position:relative;
  padding-bottom:4px;
  transition:color .25s ease;
}
.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0%;
  height:1px;
  background:var(--brass-bright);
  transition:width .25s ease;
}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{width:100%;}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  height:1px;
  background:var(--ink);
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.hero-media{
  position:absolute;
  inset:0;
}
.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 38%;
}
.hero-scrim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top, rgba(10,8,7,0.96) 4%, rgba(10,8,7,0.55) 42%, rgba(10,8,7,0.35) 65%, rgba(10,8,7,0.55) 100%);
}
.hero-content{
  position:relative;
  padding-bottom:110px;
  padding-top:180px;
  max-width:760px;
}
.eyebrow{
  font-size:0.78rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--brass-bright);
  margin:0 0 18px;
}
.hero h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.4rem);
  line-height:1.05;
  margin:0 0 22px;
  color:var(--ink);
}
.hero-lead{
  font-size:1.08rem;
  color:var(--ink-dim);
  max-width:560px;
  margin:0 0 38px;
}
.hero-actions{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}

.btn{
  display:inline-block;
  padding:15px 32px;
  font-size:0.82rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  border-radius:var(--radius);
  border:1px solid transparent;
  transition:all .25s ease;
}
.btn-primary{
  background:var(--brass);
  color:#160f0a;
  font-weight:500;
}
.btn-primary:hover{
  background:var(--brass-bright);
  transform:translateY(-1px);
}
.btn-ghost{
  border-color:rgba(243,236,226,0.35);
  color:var(--ink);
}
.btn-ghost:hover{
  border-color:var(--brass-bright);
  color:var(--brass-bright);
}
.btn-large{padding:18px 40px;font-size:0.86rem;}

/* ---------- Marquee ---------- */
.marquee{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
  background:var(--bg-alt);
  padding:16px 0;
}
.marquee-track{
  display:flex;
  gap:60px;
  white-space:nowrap;
  width:max-content;
  animation:scroll-marquee 36s linear infinite;
}
.marquee-track span{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.05rem;
  color:var(--ink-faint);
}
@keyframes scroll-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

/* ---------- Realisation pages ---------- */
.page-hero{
  position:relative;
  height:64vh;
  min-height:420px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
}
.page-hero img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.page-hero-scrim{
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,8,7,0.96) 10%, rgba(10,8,7,0.35) 60%, rgba(10,8,7,0.45) 100%);
}
.page-hero-content{
  position:relative;
  padding:170px 0 56px;
}
.breadcrumb{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.78rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:22px;
}
.breadcrumb:hover{color:var(--brass-bright);}
.page-hero-content h1{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2.2rem, 5vw, 3.4rem);
  margin:0;
  color:var(--ink);
}
.intro{
  padding:64px 0 20px;
}
.intro p{
  max-width:680px;
  color:var(--ink-dim);
  font-size:1.05rem;
  margin:0;
}
.specs{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:28px 0 0;
  padding:0;
  list-style:none;
}
.specs li{
  border:1px solid var(--line);
  padding:9px 16px;
  font-size:0.8rem;
  letter-spacing:0.04em;
  color:var(--ink-dim);
}
.specs li strong{
  color:var(--brass-bright);
  font-weight:500;
}
.other-models{
  border-top:1px solid var(--line);
}
.other-models .cat-grid{
  grid-template-columns:repeat(4, 1fr);
}
@media (max-width: 860px){
  .other-models .cat-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .other-models .cat-grid{grid-template-columns:1fr;}
}

/* ---------- Sections ---------- */
.section{
  padding:120px 0;
}
.section-alt{
  background:var(--bg-alt);
}
.section-head{
  max-width:640px;
  margin:0 0 64px;
}
.section-head h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem, 3.4vw, 2.7rem);
  margin:0;
  color:var(--ink);
}

/* Philosophie */
.philo-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.philo-card{
  background:var(--bg);
  padding:48px 44px;
  display:flex;
  gap:28px;
  align-items:flex-start;
}
.philo-num{
  flex:none;
  width:88px;
  font-family:var(--serif);
  font-weight:700;
  font-size:5.6rem;
  line-height:0.82;
  color:var(--brass-bright);
  letter-spacing:-0.02em;
}
.philo-body{
  padding-top:10px;
}
.philo-card h3{
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:600;
  margin:0 0 12px;
}
.philo-card p{
  color:var(--ink-dim);
  margin:0;
  font-size:0.98rem;
}
@media (max-width: 640px){
  .philo-card{gap:18px;}
  .philo-num{width:64px;font-size:3.8rem;}
}

.section-lead{
  color:var(--ink-dim);
  max-width:520px;
  margin:18px 0 0;
  font-size:0.98rem;
}

/* Category grid (home) */
.cat-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.cat-card{
  display:block;
  border:1px solid var(--line);
  background:var(--bg);
  overflow:hidden;
  transition:border-color .25s ease;
}
.cat-card:hover{
  border-color:rgba(201,143,74,0.5);
}
.cat-card-media{
  aspect-ratio:4/3;
  overflow:hidden;
}
.cat-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.cat-card:hover .cat-card-media img{
  transform:scale(1.05);
}
.cat-card-body{
  padding:22px 24px 26px;
}
.cat-card-kicker{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:8px;
}
.cat-card-body h3{
  margin:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.35rem;
  color:var(--ink);
}
@media (max-width: 860px){
  .cat-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width: 560px){
  .cat-grid{grid-template-columns:1fr;}
}

/* Dense full gallery (all photos) */
.gallery-dense{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
.gallery-dense figure{
  margin:0;
  border:1px solid var(--line);
  overflow:hidden;
}
.gallery-dense img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
  transition:transform .5s ease;
}
.gallery-dense figure:hover img{
  transform:scale(1.06);
}
@media (max-width: 860px){
  .gallery-dense{grid-template-columns:repeat(3, 1fr);}
}
@media (max-width: 560px){
  .gallery-dense{grid-template-columns:repeat(2, 1fr);gap:8px;}
}

/* Gallery */
.gallery{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.gallery-item{
  margin:0;
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
}
.gallery-item-wide{
  grid-column:span 3;
}
.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  aspect-ratio:16/10;
  transition:transform .6s ease;
}
.gallery-item-wide img{
  aspect-ratio:21/9;
}
.gallery-item:hover img{
  transform:scale(1.04);
}
.gallery-item.natural{
  display:flex;
  align-items:center;
  background:var(--bg-alt);
}
.gallery-item.natural img{
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}
.gallery-item figcaption{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:22px 24px;
  font-size:0.86rem;
  color:var(--ink);
  background:linear-gradient(to top, rgba(10,8,7,0.92), rgba(10,8,7,0));
  opacity:0;
  transform:translateY(8px);
  transition:opacity .3s ease, transform .3s ease;
}
.gallery-item:hover figcaption{
  opacity:1;
  transform:translateY(0);
}

/* Savoir-faire */
.savoir-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}
.savoir-lead{
  color:var(--ink-dim);
  max-width:460px;
  margin:0 0 44px;
}
.steps{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:30px;
}
.steps li{
  display:flex;
  gap:22px;
  align-items:flex-start;
}
.step-num{
  font-family:var(--serif);
  font-size:1.1rem;
  color:var(--brass-bright);
  border:1px solid rgba(201,143,74,0.4);
  border-radius:50%;
  width:38px;
  height:38px;
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.steps h3{
  margin:0 0 6px;
  font-family:var(--serif);
  font-size:1.2rem;
  font-weight:600;
}
.steps p{
  margin:0;
  color:var(--ink-dim);
  font-size:0.95rem;
}
.savoir-media img{
  border:1px solid var(--line);
}

/* Contact */
.section-contact{
  text-align:center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,143,74,0.10), transparent 60%),
    var(--bg-alt);
  border-top:1px solid var(--line);
}
.contact-inner{
  max-width:640px;
}
.contact-inner h2{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(2rem, 4vw, 2.8rem);
  margin:0 0 20px;
}
.contact-lead{
  color:var(--ink-dim);
  margin:0 0 40px;
}

/* Footer */
.site-footer{
  padding:56px 0 40px;
  border-top:1px solid var(--line);
}
.footer-inner{
  text-align:center;
  color:var(--ink-faint);
  font-size:0.85rem;
}
.brand-footer{
  justify-content:center;
  margin-bottom:14px;
}
.footer-inner p{margin:4px 0;}
.footer-copy{color:var(--ink-faint);opacity:0.7;}

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .nav{
    position:fixed;
    top:0; right:0;
    height:100svh;
    width:min(78vw, 320px);
    background:var(--bg-alt);
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    gap:28px;
    padding:0 40px;
    transform:translateX(100%);
    transition:transform .35s ease;
    border-left:1px solid var(--line);
  }
  .nav.open{transform:translateX(0);}
  .nav a{font-size:1rem;}
  .nav-toggle{display:flex;}

  .philo-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:1fr 1fr;}
  .gallery-item-wide{grid-column:span 2;}
  .savoir-grid{grid-template-columns:1fr;gap:48px;}
  .savoir-media{order:-1;}
  .section{padding:88px 0;}
}

@media (max-width: 560px){
  .gallery{grid-template-columns:1fr;}
  .gallery-item-wide{grid-column:span 1;}
  .gallery-item figcaption{opacity:1;transform:none;position:static;background:none;padding:14px 2px 0;color:var(--ink-dim);}
  .hero-content{padding-top:140px;padding-bottom:70px;}
  .hero-actions{flex-direction:column;}
  .btn{text-align:center;}
}