@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Work+Sans:wght@300;400;500;600&display=swap');

:root{
  --plum: #7A9482;
  --plum-deep: #4C5C51;
  --gold: #B8863E;
  --sage: #7C9473;
  --cream: #FBF9F5;
  --paper: #F3EEE6;
  --ink: #2B2129;
  --ink-soft: #6B5F68;
  --line: #E4DCD0;
}

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

body{
  background: var(--cream);
  color: var(--ink);
  font-family: 'Work Sans', sans-serif;
  font-weight: 300;
  line-height: 1.65;
}

h1,h2,h3{font-family: 'Cormorant Garamond', serif; font-weight: 600;}
a{color:inherit; text-decoration:none;}
.wrap{max-width: 1080px; margin: 0 auto; padding: 0 32px;}
img{max-width:100%; display:block;}

/* ---------- NAV ---------- */
header{
  position: sticky; top:0; z-index: 50;
  background: rgba(251,249,245,0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .3s ease;
}
header.is-scrolled{box-shadow: 0 4px 20px rgba(43,33,41,0.06);}
header.is-scrolled nav.wrap{height: 64px;}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height: 80px; transition: height .25s ease;}

/* ---- Scroll reveal (staggered, premium easing) ---- */
.reveal{
  opacity:0; transform: translateY(28px);
  transition: opacity .9s cubic-bezier(0.16,1,0.3,1), transform .9s cubic-bezier(0.16,1,0.3,1);
}
.reveal.revealed{opacity:1; transform: translateY(0);}

/* ---- Hero entrance (pure CSS — never depends on JS to become visible) ---- */
.hero-enter{
  opacity:0; transform: translateY(16px);
  animation: heroEnter .8s cubic-bezier(0.16,1,0.3,1) forwards;
}
.hero-enter:nth-of-type(1){animation-delay:.05s;}
.eyebrow.hero-enter{animation-delay:.05s;}
.hero h1.hero-enter{animation-delay:.18s;}
.hero p.lead.hero-enter{animation-delay:.32s;}
.hero-actions.hero-enter{animation-delay:.46s;}
.trust-row.hero-enter{animation-delay:.58s;}
.hero-photo.hero-enter{animation-delay:.15s;}
@keyframes heroEnter{
  to{opacity:1; transform:translateY(0);}
}

/* ---- Magnetic buttons ---- */
.btn-primary, .nav-cta{transition: transform .2s cubic-bezier(0.16,1,0.3,1);}

/* ---- Floating hero icon ---- */
.hero-card svg{animation: floatIcon 5s ease-in-out infinite;}
@keyframes floatIcon{
  0%,100%{transform: translateY(0) rotate(0deg);}
  50%{transform: translateY(-8px) rotate(3deg);}
}

/* ---- Parallax hero card ---- */
.hero-card{will-change: transform;}

/* ---- Floating decorative dots in hero ---- */
.hero{overflow:hidden;}
.float-dot{
  position:absolute; border-radius:50%; background: var(--gold); opacity:0.35;
  animation: floatDot 9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes floatDot{
  0%,100%{transform: translate(0,0);}
  50%{transform: translate(14px,-22px);}
}

/* ---- Elevation on hover ---- */
.service, .team-card, .hero-card, .contact-detail, .about-visual{
  transition: transform .35s cubic-bezier(0.16,1,0.3,1), box-shadow .35s ease, border-color .3s ease;
}
.service:hover{box-shadow: 0 14px 32px rgba(76,92,81,0.1); transform: translateY(-4px);}
.team-card:hover{box-shadow: 0 18px 40px rgba(76,92,81,0.12); transform: translateY(-4px);}

/* ---- Image zoom on hover ---- */
.team-card{overflow:hidden;}
.team-card img, .about-visual img{transition: transform .6s cubic-bezier(0.16,1,0.3,1);}
.team-card:hover img, .about-visual:hover img{transform: scale(1.06);}

/* ---- Service card icon pulse on hover ---- */
.service-icon{transition: transform .3s cubic-bezier(0.16,1,0.3,1), background .3s ease;}
.service:hover .service-icon{transform: scale(1.12) rotate(-4deg); background: #fff;}

/* ---- Underline sweep on nav links ---- */
.nav-links a{position:relative;}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:-4px; width:0; height:1px; background: var(--gold);
  transition: width .3s cubic-bezier(0.16,1,0.3,1);
}
.nav-links a:hover::after, .nav-links a.active::after{width:100%;}

@media (prefers-reduced-motion: reduce){
  .reveal, .hero-enter{opacity:1 !important; transform:none !important; transition:none !important; animation:none !important;}
  .hero-card svg, .float-dot{animation:none !important;}
}

/* ---- Fail-safes: content must never be permanently invisible ---- */
noscript ~ .hero-enter, .no-js .hero-enter{opacity:1; transform:none; animation:none;}
.hero-photo{background: var(--paper);}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:44px; height:44px; border-radius:50%;}
.brand span{font-family:'Cormorant Garamond', serif; font-size: 1.4rem; font-weight:600; color: var(--plum-deep);}
.nav-links{display:flex; gap:34px; font-size:0.87rem; color: var(--ink-soft);}
.nav-links a:hover, .nav-links a.active{color: var(--plum-deep); font-weight:500;}
.nav-cta{
  background: var(--plum); color: var(--cream); padding:11px 24px; border-radius:3px;
  font-size:0.85rem; font-weight:500;
}
.mobile-menu-btn{display:none;}

/* ---------- PAGE HEADER (non-home pages) ---------- */
.page-header{padding: 60px 0 50px; text-align:center; border-bottom:1px solid var(--line);}
.page-header .section-tag{justify-content:center;}
.page-header h1{font-size: clamp(2rem, 4vw, 2.8rem); color: var(--plum-deep); font-style:italic;}
.page-header p{color: var(--ink-soft); font-size:1rem; max-width:52ch; margin: 14px auto 0;}

/* ---------- HERO (home) ---------- */
.hero{
  padding: 0;
  position: relative;
  background: linear-gradient(120deg, var(--cream), #F1EFE3, var(--cream), #F0EEE0);
  background-size: 300% 300%;
  animation: heroGradient 18s ease infinite;
  overflow:hidden;
}
@keyframes heroGradient{
  0%{background-position: 0% 50%;}
  50%{background-position: 100% 50%;}
  100%{background-position: 0% 50%;}
}
@media (prefers-reduced-motion: reduce){
  .hero{animation:none;}
}
.hero-watermark{
  position:absolute; top:-8%; right:-12%; width:640px; height:640px;
  opacity:0.05; pointer-events:none;
}
.hero-inner{
  position:relative; z-index:2;
  display:grid; grid-template-columns: 1.05fr 0.95fr;
  min-height: 84vh; align-items:stretch;
}
.hero-copy{display:flex; flex-direction:column; justify-content:center; padding: 60px 4vw 60px 32px;}
.eyebrow{
  font-size:0.8rem; color: var(--gold); font-weight:500; letter-spacing:0.03em;
  margin-bottom:18px; display:flex; align-items:center; gap:9px;
}
.eyebrow::before{content:''; width:24px; height:1px; background:var(--gold);}
.hero h1{
  font-size: clamp(2.6rem, 5.4vw, 4rem); line-height:1.05; color: var(--plum-deep);
  font-style: italic; max-width: 12ch; letter-spacing:-0.01em;
}
.hero p.lead{margin-top:24px; font-size:1.12rem; color: var(--ink-soft); max-width:42ch; line-height:1.7;}
.hero-actions{margin-top:36px; display:flex; gap:16px; flex-wrap:wrap; align-items:center;}
.hero-photo{
  position:relative; overflow:hidden;
}
.hero-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: grayscale(0.15) sepia(0.12) saturate(1.05);
}
.hero-photo::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(122,148,130,0.08), rgba(76,92,81,0.42) 88%);
  mix-blend-mode: multiply;
}
.hero-photo::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:80px; z-index:2;
  background: linear-gradient(90deg, var(--cream), rgba(251,249,245,0));
}
.hero-caption{
  position:absolute; z-index:3; bottom:28px; left:28px; right:28px;
  color:#fff; font-size:0.85rem; font-style:italic; font-family:'Cormorant Garamond',serif;
  opacity:0.92;
}
.btn-primary{background: var(--plum); color: var(--cream); padding:15px 30px; border-radius:3px; font-size:0.9rem; font-weight:500; display:inline-block;}
.btn-phone{
  display:flex; align-items:center; gap:10px; border:1px solid var(--line); padding:13px 22px; border-radius:3px;
  font-size:0.88rem; color: var(--plum-deep); background: var(--paper);
}
.btn-phone b{font-family:'Cormorant Garamond',serif; font-size:1.1rem; font-weight:600;}
.trust-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:34px;}
.trust-pill{
  font-size:0.76rem; background:#fff; border:1px solid var(--line); padding:7px 13px; border-radius:20px; color: var(--plum-deep);
}
@media (max-width: 900px){
  .hero-inner{grid-template-columns:1fr; min-height:auto;}
  .hero-photo{height:340px;}
  .hero-copy{padding: 44px 24px;}
}

/* ---------- STATS BAR ---------- */
.stats-bar{background: var(--plum-deep); padding: 40px 0;}
.stats-grid{display:flex; justify-content:space-between; flex-wrap:wrap; gap:28px;}
.stat-item{text-align:center; color: var(--cream); flex:1; min-width:150px;}
.stat-item b{display:block; font-family:'Cormorant Garamond',serif; font-size:2.3rem; font-style:italic; color: #E8C077;}
.stat-item span{font-size:0.8rem; opacity:0.8; letter-spacing:0.01em;}

/* ---------- SECTIONS ---------- */
.section{padding:96px 0;}
.section-head{max-width:640px; margin: 0 auto 56px; text-align:center;}
.section-tag{font-size:0.78rem; color:var(--gold); font-weight:500; letter-spacing:0.05em; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.section-head h2{font-size: clamp(1.9rem,3.4vw,2.5rem); color: var(--plum-deep); font-style:italic;}
.section-head p{color: var(--ink-soft); font-size:0.98rem; margin-top:14px;}

/* ---------- SERVICES ---------- */
.services{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;}
.service{background:#fff; border:1px solid var(--line); border-radius:6px; padding:30px 26px; transition: border-color .2s, transform .2s;}
.service:hover{border-color: var(--sage); transform: translateY(-2px);}
.service-icon{width:42px; height:42px; border-radius:50%; background: var(--paper); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.service-icon svg{width:20px; height:20px;}
.service h3{font-size:1.15rem; color: var(--plum-deep); margin-bottom:8px; font-weight:600;}
.service p{font-size:0.88rem; color: var(--ink-soft);}
.service .price-tag{display:inline-block; margin-top:14px; font-size:0.82rem; color: var(--gold); font-weight:600;}

.collab-banner{
  margin-top:32px; background: var(--paper); border:1px solid var(--line); border-radius:6px;
  padding:24px 30px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
}
.collab-banner p{font-size:0.95rem; color: var(--ink);}
.collab-banner strong{color: var(--plum-deep);}
.collab-banner a{color: var(--gold); font-weight:500; font-size:0.88rem;}

/* ---------- ABOUT / EXPERTISE ---------- */
.about{background: var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.about-grid{display:grid; grid-template-columns: 0.85fr 1.15fr; gap:56px; align-items:center;}
.about-visual{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.about-visual img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.about h2{font-size: clamp(1.85rem,3.2vw,2.35rem); color: var(--plum-deep); font-style:italic; margin-bottom:18px;}
.about p{color: var(--ink-soft); font-size:0.98rem; margin-bottom:14px; max-width:50ch;}
.badges{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px;}
.badge{font-size:0.82rem; color: var(--plum-deep); background:#fff; border:1px solid var(--line); padding:9px 16px; border-radius:20px; display:flex; align-items:center; gap:7px;}
.badge::before{content:'✓'; color: var(--sage); font-weight:600;}

/* ---------- TEAM ---------- */
.team-grid{display:grid; grid-template-columns:1fr 1fr; gap:32px; max-width:820px; margin:0 auto;}
.team-card{background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.team-card img{width:100%; aspect-ratio:1/1; object-fit:cover;}
.team-card .body{padding:22px 24px;}
.team-card h3{font-family:'Cormorant Garamond', serif; font-size:1.3rem; color:var(--plum-deep); font-weight:600;}
.team-card .role{font-size:0.85rem; color:var(--gold); margin:4px 0 10px;}
.team-card p{font-size:0.9rem; color:var(--ink-soft);}
.team-card .badges{margin-top:12px;}

.dual-photo{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.dual-photo img{border-radius:6px; aspect-ratio:1/1.1; object-fit:cover;}

/* ---------- TARIFS ---------- */
.tarifs-list{max-width:720px; margin:0 auto; border-top:1px solid var(--line);}
.tarif-row{display:flex; justify-content:space-between; align-items:baseline; padding:22px 4px; border-bottom:1px solid var(--line);}
.tarif-row h4{font-family:'Cormorant Garamond',serif; font-weight:600; font-size:1.2rem; color: var(--plum-deep);}
.tarif-row span.desc{font-size:0.82rem; color: var(--ink-soft); display:block; margin-top:3px;}
.tarif-row .price{color: var(--gold); font-weight:600; font-size:0.98rem; white-space:nowrap; padding-left:20px;}

/* ---------- CONTACT ---------- */
.contact-section{background: var(--plum-deep); color: var(--cream);}
.contact-section .section-tag{color:#E8C077;}
.contact-section .section-head h2{color: var(--cream);}
.contact-section .section-head p{color: rgba(251,249,245,0.72);}
.contact-grid{display:grid; grid-template-columns: 1fr 1fr; gap:60px; max-width:900px; margin:0 auto;}
.contact-detail div{padding:16px 0; border-top:1px solid rgba(251,249,245,0.15);}
.contact-detail div:last-child{border-bottom:1px solid rgba(251,249,245,0.15);}
.contact-detail .label{font-size:0.74rem; letter-spacing:0.05em; color:#E8C077; margin-bottom:4px;}
.contact-detail .val{font-size:1rem;}
form{display:flex; flex-direction:column; gap:16px;}
form input, form textarea{
  background: rgba(251,249,245,0.08); border:1px solid rgba(251,249,245,0.2); border-radius:3px;
  color:var(--cream); padding:13px 14px; font-family:'Work Sans',sans-serif; font-size:0.92rem;
}
form input::placeholder, form textarea::placeholder{color: rgba(251,249,245,0.5);}
form textarea{resize:vertical; min-height:88px;}
form button{
  margin-top:6px; align-self:flex-start; background: #E8C077; color: var(--plum-deep);
  padding:14px 28px; font-size:0.88rem; font-weight:600; border:none; border-radius:3px;
}

footer{border-top:1px solid var(--line); padding:30px 0; background: var(--cream);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:0.78rem; color: var(--ink-soft);}

@media (max-width: 900px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr;}
  .services{grid-template-columns: 1fr 1fr;}
  .nav-links{display:none;}
  .stats-grid{justify-content:center; text-align:center;}
  .team-grid, .dual-photo{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .services{grid-template-columns:1fr;}
}