:root{
  --cream:#FBF9F2;
  --plum:#84336B;
  --ink:#241A20;
  --ink-soft:#786A70;
  --line: rgba(36,26,32,0.15);
  --max: 1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Fraunces', serif;
  font-optical-sizing:auto;
  font-weight:350;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}
h1,h2,h3,h4{
  font-family:'Fraunces', serif;
  font-weight:500;
  margin:0;
  line-height:1.1;
  letter-spacing:-0.01em;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
section{padding:100px 0;}
section + section{border-top:1px solid var(--line);}
@media (max-width:720px){
  section{padding:64px 0;}
  .wrap{padding:0 22px;}
}

a:focus-visible, button:focus-visible{outline:1px solid var(--plum); outline-offset:3px;}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,249,242,0.9);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
}
.nav-inner{
  max-width:var(--max); margin:0 auto; padding:18px 32px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; text-decoration:none;}
.brand img{height:54px; width:auto;}
nav.links{display:flex; gap:32px; font-size:15px;}
nav.links a{text-decoration:none; color:var(--ink); position:relative; padding:4px 0;}
nav.links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:1px;
  background:var(--plum); transform:scaleX(0); transform-origin:left;
  transition:transform .25s ease;
}
nav.links a:hover::after{transform:scaleX(1);}
nav.links a[aria-current="page"]{color:var(--plum);}
nav.links a[aria-current="page"]::after{transform:scaleX(1);}
.nav-cta{
  border:1px solid var(--ink); color:var(--ink); padding:9px 20px;
  text-decoration:none; font-size:14px; letter-spacing:.01em; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease;
}
.nav-cta:hover{border-color:var(--plum); color:var(--plum);}
.menu-btn{display:none; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn span, .menu-btn span::before, .menu-btn span::after{
  content:""; display:block; width:22px; height:1px; background:var(--ink); position:relative;
}
.menu-btn span::before{position:absolute; top:-7px;}
.menu-btn span::after{position:absolute; top:7px;}

@media (max-width:860px){
  nav.links{
    position:fixed; top:63px; left:0; right:0; bottom:0; background:var(--cream); flex-direction:column;
    padding:36px 28px; gap:26px; font-size:18px; transform:translateY(-8px);
    opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  }
  nav.links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .menu-btn{display:block;}
  .nav-cta{display:none;}
}

/* ---------- HERO (homepage) ---------- */
.hero{padding:76px 0 0 0;}
.hero-inner{
  max-width:var(--max); margin:0 auto; padding:0 32px;
  display:grid; grid-template-columns:1.15fr 0.85fr; align-items:end; gap:20px;
  min-height:560px;
}
.hero-copy{padding-bottom:80px;}
.hero-eyebrow{
  font-size:14px; font-style:italic; color:var(--plum); margin-bottom:24px; max-width:360px;
}
.hero h1{
  font-size:clamp(34px, 4.6vw, 54px);
  max-width:12.5ch;
  font-weight:450;
}
.hero p.lede{
  margin-top:26px; max-width:48ch; font-size:18px; color:var(--ink-soft); line-height:1.65;
}
.hero-actions{margin-top:38px; display:flex; gap:28px; flex-wrap:wrap; align-items:center;}
.btn{
  display:inline-block; padding:13px 24px; text-decoration:none; font-size:15px;
  border:1px solid var(--ink); cursor:pointer; color:var(--ink);
  transition:border-color .2s ease, color .2s ease;
}
.btn:hover{border-color:var(--plum); color:var(--plum);}
.btn-text{
  text-decoration:none; color:var(--ink); font-size:15px; border-bottom:1px solid var(--line);
  padding-bottom:3px; transition:border-color .2s ease, color .2s ease;
}
.btn-text:hover{border-color:var(--plum); color:var(--plum);}

.hero-figure{
  position:relative; height:100%; display:flex; align-items:center; justify-content:center;
}
.hero-figure img{width:100%; max-width:460px; height:auto;}
@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr; min-height:auto;}
  .hero-figure{display:none;}
  .hero-copy{padding-bottom:56px;}
}

/* ---------- PAGE HEADER (sub-pages) ---------- */
.page-hero{padding:72px 0 64px;}
.page-hero .kicker{font-style:italic; font-size:20px; color:var(--plum); font-weight:400;}
.page-hero h1{font-size:clamp(32px,4.2vw,48px); margin-top:14px; max-width:16ch;}
.page-hero p.lede{margin-top:22px; max-width:56ch; font-size:18px; color:var(--ink-soft); line-height:1.65;}

/* ---------- INTRO / TEASERS (homepage) ---------- */
.intro{
  display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:start;
}
.kicker{
  font-style:italic; font-size:20px; color:var(--plum); font-weight:400;
}
.intro h2{font-size:clamp(26px,3.2vw,36px); margin-top:14px;}
.intro-body p{font-size:17px; color:var(--ink-soft); max-width:58ch;}
.intro-body p + p{margin-top:18px;}
.intro-body .more{display:inline-block; margin-top:20px;}
@media (max-width:860px){
  .intro{grid-template-columns:1fr; gap:20px;}
}

.teaser-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.teaser{padding-top:22px; border-top:1px solid var(--ink);}
.teaser-tag{font-size:13px; font-style:italic; color:var(--ink-soft); margin-bottom:10px;}
.teaser h3{font-size:24px; margin-bottom:10px; font-weight:500;}
.teaser p{color:var(--ink-soft); font-size:16px; max-width:44ch;}
.teaser .more{display:inline-block; margin-top:18px;}
@media (max-width:860px){
  .teaser-grid{grid-template-columns:1fr; gap:44px;}
}

/* ---------- SERVICES DUAL PILLARS ---------- */
.services-head{max-width:640px; margin-bottom:52px;}
.services-head h2{font-size:clamp(26px,3.2vw,36px);}
.services-head p{margin-top:16px; color:var(--ink-soft); font-size:17px;}

.pillars{display:grid; grid-template-columns:1fr 1fr; gap:56px;}
.pillar{padding-top:22px; border-top:1px solid var(--ink);}
.pillar-tag{font-size:13px; font-style:italic; color:var(--ink-soft); margin-bottom:10px;}
.pillar h3{font-size:25px; margin-bottom:6px; font-weight:500;}
.pillar p.desc{color:var(--ink-soft); margin-top:14px; font-size:16px; max-width:44ch;}
.pillar ol, .pillar ul{margin:26px 0 0 0; padding:0; list-style:none;}
.pillar li{
  display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); font-size:15.5px;
}
.pillar li:first-child{border-top:none;}
.pillar li .num{
  font-size:14px; color:var(--ink-soft); min-width:20px; font-style:italic;
}
.pillar li b{font-weight:500;}
.pillar li small{display:block; color:var(--ink-soft); font-weight:350; margin-top:3px; line-height:1.5;}

@media (max-width:860px){
  .pillars{grid-template-columns:1fr; gap:44px;}
}

/* ---------- APPROCHE ---------- */
.approche{display:grid; grid-template-columns:0.9fr 1.1fr; gap:64px; align-items:center;}
.approche-visual{
  position:relative; padding:44px 8px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.approche-visual .quote-mark{
  font-size:80px; color:var(--plum); line-height:1; opacity:.7; display:block; margin-bottom:8px;
}
.approche-visual blockquote{
  margin:0; font-style:italic; font-weight:400;
  font-size:24px; line-height:1.42; color:var(--ink);
}
.approche-visual .sig{
  margin-top:22px; font-style:normal; font-size:14px; color:var(--ink-soft);
}
.approche h2{font-size:clamp(26px,3.2vw,36px); max-width:14ch;}
.approche p{color:var(--ink-soft); font-size:17px; margin-top:20px; max-width:52ch;}
.approche-list{margin-top:32px; display:grid; gap:22px;}
.approche-list .item{display:flex; gap:16px;}
.approche-list .dot{width:6px; height:6px; border-radius:50%; background:var(--plum); margin-top:10px; flex:none;}
.approche-list b{display:block; font-size:16px; font-weight:500;}
.approche-list span{color:var(--ink-soft); font-size:15px;}
@media (max-width:860px){
  .approche{grid-template-columns:1fr; gap:36px;}
}

/* ---------- REALISATIONS ---------- */
.work-head{max-width:640px; margin-bottom:48px;}
.work-head h2{font-size:clamp(26px,3.2vw,36px);}
.work-head p{margin-top:16px; color:var(--ink-soft); font-size:17px;}
.work-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:30px 26px;
}
.work-grid.preview{grid-template-columns:repeat(4, 1fr);}
.work-item figure{margin:0;}
.work-item img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  filter:grayscale(88%) contrast(1.04);
  transition:filter .45s ease;
}
.work-item:hover img{filter:grayscale(0%);}
.work-item figcaption{
  margin-top:12px; font-size:14px; font-style:italic; color:var(--ink-soft);
}
@media (max-width:980px){
  .work-grid{grid-template-columns:repeat(2, 1fr); gap:28px 20px;}
}
@media (max-width:560px){
  .work-grid{grid-template-columns:1fr;}
}

/* ---------- POURQUOI ---------- */
.pourquoi-inner{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px;}
.pourquoi h2{font-size:clamp(26px,3.2vw,36px); max-width:10ch;}
.pourquoi-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px 48px;}
.pourquoi-grid .item{padding-top:18px; border-top:1px solid var(--line);}
.pourquoi-grid .item b{display:block; font-size:18px; margin-bottom:8px; font-weight:500;}
.pourquoi-grid .item span{color:var(--ink-soft); font-size:15px;}
@media (max-width:860px){
  .pourquoi-inner{grid-template-columns:1fr; gap:28px;}
  .pourquoi-grid{grid-template-columns:1fr;}
}

/* ---------- REFERENCES ---------- */
.references-head{max-width:640px; margin-bottom:40px;}
.references-head h2{font-size:clamp(26px,3.2vw,36px);}
.references-head p{margin-top:16px; color:var(--ink-soft); font-size:17px;}
.ref-grid{
  display:flex; flex-wrap:wrap; column-gap:40px; row-gap:16px;
}
.ref-chip{
  font-size:17px; color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--line);
}

.client-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:64px;
}
.client-tile{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:16/6; padding:14px 22px; border:1px solid var(--line); background:var(--cream);
}
.client-tile img{
  width:100%; height:100%; object-fit:contain;
  filter:grayscale(100%); opacity:.8; transition:filter .3s ease, opacity .3s ease;
}
.client-tile:hover img{filter:grayscale(0%); opacity:1;}
@media (max-width:900px){ .client-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:560px){ .client-grid{grid-template-columns:repeat(2,1fr); gap:12px;} .client-tile{padding:10px 14px;} }

/* ---------- CONTACT ---------- */
.contact-inner{display:grid; grid-template-columns:1fr 1fr; gap:64px;}
.contact h1, .contact h2{font-size:clamp(26px,3.2vw,36px); max-width:12ch;}
.contact p.lede{color:var(--ink-soft); font-size:17px; margin-top:16px; max-width:44ch;}
.contact-card{
  border-top:1px solid var(--ink); padding-top:28px; align-self:start;
}
.contact-card .row{display:flex; flex-direction:column; gap:22px;}
.contact-card .label{font-size:13px; font-style:italic; color:var(--ink-soft); margin-bottom:4px;}
.contact-card .value{font-size:19px;}
.contact-card a.value{text-decoration:none; border-bottom:1px solid var(--line);}
.contact-card a.value:hover{border-color:var(--plum); color:var(--plum);}
.contact-actions{display:flex; gap:28px; margin-top:32px; flex-wrap:wrap; align-items:center;}
@media (max-width:860px){
  .contact-inner{grid-template-columns:1fr; gap:32px;}
}

/* ---------- FOOTER ---------- */
footer{padding:32px 0; border-top:1px solid var(--line);}
.footer-inner{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:14px; color:var(--ink-soft);}
.footer-inner img{height:48px;}
.footer-inner > div:first-child{display:flex; align-items:center;}