/* =====================
   DESIGN SYSTEM
===================== */

:root{
  --burgundy:#7a0f1a;
  --burgundy-dark:#5c0b14;
  --black:#0e0e10;
  --dark:#15151c;
  --white:#ffffff;
  --light:#f4f4f6;
  --accent-dark:#7a0f1a;
--primary:#7a0f1a;
--nav-height:80px;
--muted:#6b7280;
  --transition:all .4s cubic-bezier(.2,.8,.2,1);
}
html{
  scroll-behavior:smooth;
}
*{margin:0;padding:0;box-sizing:border-box;}

body{
  font-family:'Inter', sans-serif;
  background:var(--white);
  color:var(--black);
  line-height:1.6;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:'Playfair Display', serif;
  font-weight:700;
}

.container{
  width:90%;
  max-width:1200px;
  margin:auto;
}


section{
padding:110px 0;
}

@media (max-width:880px){

section{
padding:80px 0;
}

}
  
.divider{
  height:1px;
  background:linear-gradient(to right, transparent, rgba(122,15,26,.4), transparent);
  margin:80px auto;
  width:70%;
}

h2{
  font-size:42px;
  margin-bottom:20px;
}

p{
  font-size:17px;
}
.btn-primary{
  backdrop-filter:blur(10px);
  background:linear-gradient(135deg,var(--burgundy),#a01a29);
  color:white;
  padding:14px 32px;
  text-decoration:none;
  font-weight:600;
  letter-spacing:.5px;
  border-radius:50px;
  box-shadow:0 10px 30px rgba(122,15,26,.3);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  display:inline-block;
}

.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 15px 40px rgba(122,15,26,.4);
}

.btn-outline{
  border:1px solid var(--burgundy);
  padding:12px 28px;
  background: var(--light);
    border-radius:50px;
  color:var(--burgundy);
  text-decoration:none;
  font-weight:600;
  transition:var(--transition);
}

.btn-outline:hover{
    border:1px solid var(--light);
  background:var(--burgundy);
  color:white;
}

/* =====================
   NAVIGATION
===================== */

#navbar{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
width:97%;
max-width:1700px;

background:rgba(255,255,255,.78);

backdrop-filter:blur(18px);

border-radius:60px;

padding:10px 20px;

z-index:1000;

box-shadow:
0 10px 35px rgba(0,0,0,.08);

transition:var(--transition);
}

#navbar.scrolled{
top:10px;
box-shadow:
0 15px 40px rgba(0,0,0,.12);
}

.nav-container{
width:100%;
max-width:1360px;
display:flex;
align-items:center;
justify-content:space-between;
}

/* LOGO */

.logo-link{
display:flex;
align-items:center;
gap:10px;
text-decoration:none;
}

.logo img{
height:40px;
border-radius:50%;
flex-shrink:0;
}

.logo-text{
display:flex;
flex-direction:column;
line-height:1.1;
white-space:nowrap;
}

.brand-main{
font-weight:700;
font-size:14px;
color:var(--black);
}

.brand-sub{
font-size:12px;
color:var(--muted);
}

/* NAV LINKS */

nav ul{
display:flex;
align-items:center;
list-style:none;
gap:8px;
flex-wrap:nowrap;
}

.nav-link{
text-decoration:none;
font-weight:500;
font-size:14px;
color:var(--black);
padding:6px 8px;
border-radius:20px;
white-space:nowrap;
transition:all .3s ease;
}

.nav-link:hover{
color:var(--primary);
background:rgba(122,15,26,0.05);
}

.nav-link.active{
color:var(--primary);
font-weight:600;
}

.nav-contact{
background:linear-gradient(135deg,var(--burgundy),#991827);
color:white;
padding:10px 18px;
border-radius:50px;
text-decoration:none;
font-weight:600;
font-size:15px;
white-space:nowrap;
transition:var(--transition);
}

.nav-contact:hover{
transform:translateY(-2px);
box-shadow:0 10px 25px rgba(122,15,26,.25);
}

/* LANGUAGE SWITCH */

.lang-switch{
border:none;
background:transparent;
cursor:pointer;
position:relative;
flex-shrink:0;
animation:langPulse 3.5s ease-in-out infinite;
}

@keyframes langPulse{
0%{transform:scale(1);}
50%{transform:scale(1.04);}
100%{transform:scale(1);}
}

.lang-switch::after{
content:"";
position:absolute;
inset:-4px;
border-radius:60px;
background:rgba(122,15,26,.12);
filter:blur(12px);
opacity:.55;
z-index:-1;
animation:langGlow 3.5s ease-in-out infinite;
}

@keyframes langGlow{
0%{opacity:.25;transform:scale(.95);}
50%{opacity:.65;transform:scale(1.05);}
100%{opacity:.25;transform:scale(.95);}
}

.lang-track{
position:relative;
display:flex;
align-items:center;
gap:12px;
padding:6px;
border-radius:50px;
background:linear-gradient(135deg,rgba(122,15,26,.10),rgba(122,15,26,.18));
min-width:98px;
overflow:hidden;
backdrop-filter:blur(12px);
border:1px solid rgba(122,15,26,.12);
box-shadow:0 10px 25px rgba(122,15,26,.12);
transition:all .35s ease;
}

.lang-switch:hover .lang-track{
transform:translateY(-2px);
box-shadow:0 14px 35px rgba(122,15,26,.22);
background:linear-gradient(135deg,rgba(122,15,26,.16),rgba(122,15,26,.24));
}

.lang-thumb{
position:absolute;
left:6px;
top:6px;
width:40px;
height:34px;
border-radius:40px;
background:linear-gradient(135deg,var(--burgundy),#9d1726);
transition:all .35s cubic-bezier(.2,.8,.2,1);
box-shadow:0 6px 18px rgba(122,15,26,.35);
}

.lang-track.fr .lang-thumb{
left:50px;
}

.lang-option{
position:relative;
z-index:2;
width:40px;
text-align:center;
font-size:13px;
font-weight:700;
color:var(--burgundy);
transition:all .3s ease;
letter-spacing:.5px;
}

.active-lang{
color:white;
}

.lang-track::before{
content:"";
position:absolute;
top:0;
left:-120%;
width:80%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
transform:skewX(-25deg);
animation:langShine 5s linear infinite;
}

@keyframes langShine{
100%{left:130%;}
}

/* HAMBURGER */

.hamburger{
display:none;
width:46px;
height:46px;
border:none;
background:rgba(122,15,26,.08);
border-radius:12px;
align-items:center;
justify-content:center;
cursor:pointer;
transition:transform .18s ease, background .18s ease;
}

.hamburger[aria-expanded="true"]{
background:rgba(122,15,26,.14);
transform:scale(0.98);
}

.hamburger .bar,
.hamburger .bar::before,
.hamburger .bar::after{
content:"";
display:block;
width:22px;
height:2px;
background:var(--burgundy);
border-radius:2px;
position:relative;
}

.hamburger .bar::before{
position:absolute;
top:-6px;
}

.hamburger .bar::after{
position:absolute;
top:6px;
}

/* MOBILE PANEL */

#mobilePanel{
display:none;
}

/* =====================
   COLLAPSED NAVIGATION
   Applied by assets/nav-fit.js when the menu does not fit the screen.
   The old fixed breakpoint collapsed the menu on large displays.
   ===================== */


html.nav-collapsed nav ul{
display:none !important;
}

html.nav-collapsed .hamburger{
display:flex !important;
}

html.nav-collapsed #mobilePanel{
display:block !important;
position:fixed;
top:88px;
left:50%;
transform:translateX(-50%) translateY(-18px) scale(.96);
width:92%;
background:rgba(255,255,255,.92);
backdrop-filter:blur(20px);
border-radius:28px;
padding:22px;
box-shadow:0 25px 60px rgba(0,0,0,.14);
opacity:0;
visibility:hidden;
transition:opacity .35s ease, transform .4s ease, visibility .35s ease;
z-index:999;
}

html.nav-collapsed #mobilePanel.show{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0) scale(1);
}

html.nav-collapsed .mobile-nav{
display:flex;
flex-direction:column;
gap:10px;
}

html.nav-collapsed .mobile-link, html.nav-collapsed .mobile-contact, html.nav-collapsed .mobile-lang{
display:flex;
justify-content:center;
align-items:center;
padding:15px 18px;
border-radius:16px;
text-decoration:none;
font-weight:600;
border:none;
cursor:pointer;
}

html.nav-collapsed .mobile-link{
background:#f7f7f8;
color:var(--black);
}

html.nav-collapsed .mobile-contact{
background:var(--burgundy);
color:white;
}

html.nav-collapsed .mobile-lang{
background:rgba(122,15,26,.08);
color:var(--burgundy);
}

html.nav-collapsed .logo{
font-size:18px;
}


/* =====================
   HERO
===================== */

.hero{
  background: radial-gradient(circle at 20% 30%, rgba(122,15,26,.4), transparent 40%),
              radial-gradient(circle at 80% 70%, rgba(122,15,26,.25), transparent 40%),
              linear-gradient(135deg,#0e0e14,#1b1b26);
  color:white;
padding-top:200px;
padding-bottom:120px;
  position:relative;
  overflow:hidden;
  text-align:center;
}

.hero::after{
  content:"";
  position:absolute;
  width:500px;
  height:500px;
  background:radial-gradient(circle,var(--burgundy),transparent 70%);
  opacity:.12;
  filter:blur(100px);
  animation:float 8s ease-in-out infinite;
  top:100px;
  left:-200px;
  pointer-events:none;
}

.hero::before{
  content:"";
  position:absolute;
  width:600px;
  height:600px;
  background:radial-gradient(circle,var(--burgundy) 0%, transparent 70%);
  opacity:.15;
  top:-200px;
  right:-200px;
  pointer-events:none;
}

.hero{
  z-index:1;
}

.hero .container{
  position:relative;
  z-index:2;
}

@keyframes float{
  0%{transform:translateY(0px);}
  50%{transform:translateY(-30px);}
  100%{transform:translateY(0px);}
}

.hero h1{
  font-size:52px;
  max-width:800px;
  margin:0 auto 25px auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero h1 .hero-subline{
  font-size:0.62em;
  font-weight:500;
  color:rgba(255,255,255,.75);
}

.hero p{
  font-size:18px;
  max-width:650px;
  margin:0 auto 40px auto;
  opacity:.85;
}

/* =====================
   KPI SECTION
===================== */

.kpi{
  background:var(--white);
  text-align:center;
}

.kpi-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:40px;
text-align:center;
}

@media (max-width:880px){

.kpi-grid{
grid-template-columns:1fr;
gap:30px;
}

}

.kpi-item h2{
  font-size:40px;
  color:var(--burgundy);
}

.kpi-item p{
  font-weight:500;
  opacity:.8;
}

/* =====================
   SERVICES
===================== */

.services{
  background:var(--light);
}

.service-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

@media (max-width:900px){

.service-grid{
grid-template-columns:1fr;
}

}

.service-card{
  background:white;
  padding:50px;
  border-radius:20px;
  border-left:4px solid var(--burgundy);
  transition:all .4s cubic-bezier(.2,.8,.2,1);
  transform-style:preserve-3d;
}

.service-card:hover{
  transform:translateY(-15px) rotateX(3deg);
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* =====================
   HOW WE WORK
===================== */

.process{
  background:white;
}

.process-steps{
display:flex;
flex-wrap:wrap;
gap:20px;
margin-top:40px;
}

.step{
background:#eee8e8;
padding:18px 24px;
border-radius:10px;
font-weight:500;
transition:var(--transition);
}

.step:hover{
  background:var(--burgundy);
  color:white;
  transform:translateY(-10px);
}

/* =====================
   TEACHING SECTION
===================== */

.teaching{
  background:var(--burgundy);
  color:white;
  text-align:center;
}

.teaching p{
  max-width:700px;
  margin:20px auto 40px auto;
  opacity:.9;
}

/* =====================
   TESTIMONIALS TEASER
===================== */

.testimonials-teaser{
  background:var(--white);
  text-align:center;
}

.testimonials-intro{
  max-width:600px;
  margin:16px auto 40px auto;
  color:var(--muted);
}

.testimonials-more{
  margin-top:36px;
  display:inline-block;
}

.testimonials-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  /* cards size to their own content instead of stretching to match the tallest */
  align-items:flex-start;
}

.testimonial-card{
  background:white;
  border-radius:20px;
  padding:55px 45px 40px;
  box-shadow:0 20px 50px rgba(0,0,0,.08);
  flex:1 1 380px;
  max-width:560px;
  position:relative;
  overflow:hidden;
  text-align:left;
}

.testimonial-card::before{
  content:"\201C";
  font-family:'Playfair Display', serif;
  font-size:100px;
  line-height:1;
  color:var(--burgundy);
  opacity:.14;
  position:absolute;
  top:8px;
  left:32px;
  z-index:0;
  pointer-events:none;
}

.testimonial-quote{
  font-style:italic;
  font-size:17px;
  line-height:1.75;
  color:var(--black);
  position:relative;
  z-index:1;
  margin-bottom:30px;
}

.testimonial-author{
  display:flex;
  align-items:center;
  gap:16px;
  padding-top:24px;
  border-top:1px solid rgba(0,0,0,.08);
  position:relative;
  z-index:1;
}

.testimonial-author img{
  width:68px;
  height:68px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
  box-shadow:0 8px 20px rgba(122,15,26,.22);
}

.testimonial-author-info{
  display:flex;
  flex-direction:column;
  line-height:1.35;
}

.testimonial-name{
  font-weight:700;
  font-size:15.5px;
  color:var(--black);
}

.testimonial-role{
  font-size:13.5px;
  color:var(--muted);
}

/* =====================
   CTA
===================== */

.cta{
  background:var(--black);
  color:white;
  text-align:center;
}

/* =====================
   FOOTER
===================== */

footer{
  background:#111;
  color:#aaa;
  padding:50px 0;
  font-size:14px;
}

footer a{
  color:#e8c9cd;
  text-decoration:none;
  font-weight:500;
  transition:color .3s ease;
}

footer a:hover{
  color:#ffffff;
  text-decoration:underline;
}

/* =====================
   ANIMATIONS
===================== */

.fade-in{
  opacity:0;
  transform:translateY(60px);
  transition:all 1s cubic-bezier(.2,.8,.2,1);
}
  
  .fade-in.visible{
  opacity:1;
  transform:translateY(0);
}

/* =====================
   RESPONSIVE
===================== */

@media(max-width:768px){
  .hero h1{font-size:34px;}
  .hero p{font-size:16px;}
}

@media (max-width:880px){

.hero{
padding-bottom:80px;
}

.process-steps{
flex-direction:column;
}

}

/* =====================
   CONTENT ENGINE (JSON-driven testimonials teaser)
===================== */

.content-loading,
.content-empty{
  text-align:center;color:var(--muted);font-size:15px;padding:30px 0;width:100%;
}

/* Shown instead of a photo when a client has not supplied one. */
.testimonial-avatar{
  width:68px;height:68px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--burgundy);color:#fff;font-weight:700;font-size:22px;
  letter-spacing:.5px;box-shadow:0 8px 20px rgba(122,15,26,.22);
}

/* The client's company, shown under their role when the role does not already name it. */
.testimonial-company{
  font-size:13px;
  color:var(--muted);
  opacity:.85;
}

/* ---------- SERVICES MENU ----------------------------------------
   One navigation item holding the two service pages, so the bar stays
   short enough not to collapse into the hamburger too early.

   The panel is positioned absolutely, so it never adds to the width
   nav-fit.js measures the bar against.

   The brand colour is written out rather than taken from a variable:
   this file family names it --primary in some places and --burgundy in
   others, and a missing variable fails silently. */
.nav-menu{position:relative;}

.nav-menu-btn{
font-family:inherit;
border:none;
background:none;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:5px;
}

.nav-menu-btn::after{
content:"";
width:5px;
height:5px;
border-right:1.5px solid currentColor;
border-bottom:1.5px solid currentColor;
transform:rotate(45deg) translateY(-2px);
transition:transform .25s ease;
}

.nav-menu[data-open="true"] .nav-menu-btn::after{
transform:rotate(-135deg) translateY(1px);
}

.nav-menu-panel{
position:absolute;
top:calc(100% + 12px);
left:0;
min-width:252px;
background:#ffffff;
border:1px solid rgba(0,0,0,.07);
border-radius:12px;
box-shadow:0 14px 36px rgba(0,0,0,.13);
padding:6px;
display:flex;
flex-direction:column;
gap:2px;
opacity:0;
visibility:hidden;
transform:translateY(-6px);
transition:opacity .2s ease,transform .2s ease,visibility .2s;
z-index:1200;
}

.nav-menu[data-open="true"] .nav-menu-panel{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.nav-menu-link{
display:block;
padding:9px 12px;
border-radius:8px;
font-size:14px;
font-weight:500;
line-height:1.35;
color:#111111;
text-decoration:none;
white-space:nowrap;
transition:background .2s ease,color .2s ease;
}

.nav-menu-link:hover,
.nav-menu-link:focus-visible{
background:rgba(122,15,26,.06);
color:#7a0f1a;
}

.nav-menu-link.active-sub{
color:#7a0f1a;
font-weight:600;
}

/* the small heading above the two service links in the phone menu */
.mobile-sub{
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
opacity:.5;
margin:16px 0 4px;
}

/* ---------- PROJECT CARDS ---------------------------------------
   The card carries a photograph, the essentials, and the one or two
   figures that make the result obvious at a glance. Brand colour is
   written out rather than taken from a variable, because this file
   family names it differently in different folders. */

.section-intro{
max-width:760px;
margin:0 auto 44px;
text-align:center;
}

.section-intro .eyebrow{
display:block;
font-size:12px;
letter-spacing:.18em;
text-transform:uppercase;
color:#7a0f1a;
font-weight:600;
margin-bottom:12px;
}

.section-intro p{
color:#6b7280;
font-size:15px;
line-height:1.7;
}

.projects-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
gap:30px;
align-items:start;
}

.project-card{
background:#ffffff;
border:1px solid rgba(0,0,0,.07);
border-radius:16px;
overflow:hidden;
display:flex;
flex-direction:column;
transition:transform .3s ease,box-shadow .3s ease;
}

.project-card:hover{
transform:translateY(-4px);
box-shadow:0 18px 44px rgba(0,0,0,.10);
}

.project-media{
display:block;
aspect-ratio:16/9;
overflow:hidden;
background:#f4f4f6;
}

.project-media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .5s ease;
}

.project-card:hover .project-media img{transform:scale(1.04);}

/* shown while a case study is still waiting for its photographs */
.project-media-empty{
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#7a0f1a,#5c0b14);
}

.project-media-empty span{
color:#ffffff;
font-size:13px;
letter-spacing:.16em;
text-transform:uppercase;
opacity:.85;
text-align:center;
padding:0 18px;
}

.project-body{
padding:26px 26px 28px;
display:flex;
flex-direction:column;
flex:1;
}

.project-tag{
display:inline-block;
align-self:flex-start;
font-size:11px;
letter-spacing:.14em;
text-transform:uppercase;
color:#7a0f1a;
background:rgba(122,15,26,.07);
padding:5px 11px;
border-radius:20px;
margin-bottom:14px;
}

.project-card-link{text-decoration:none;}

.project-card-link h2{
font-size:20px;
line-height:1.35;
color:#111111;
margin:0 0 10px;
transition:color .25s ease;
}

.project-card-link:hover h2{color:#7a0f1a;}

.project-meta{
font-size:13px;
color:#6b7280;
margin:0 0 14px;
}

.project-summary{
font-size:15px;
line-height:1.7;
color:#374151;
margin:0 0 22px;
}

.project-results{
display:flex;
gap:26px;
flex-wrap:wrap;
padding:18px 0 0;
margin-top:auto;
border-top:1px solid rgba(0,0,0,.07);
}

.project-result{display:flex;flex-direction:column;gap:3px;}

.project-figure{
font-size:24px;
font-weight:700;
color:#7a0f1a;
line-height:1;
}

.project-result-label{
font-size:12px;
color:#6b7280;
line-height:1.4;
max-width:150px;
}

.project-readmore{
display:inline-block;
margin-top:22px;
font-size:14px;
font-weight:600;
color:#7a0f1a;
text-decoration:none;
transition:gap .25s ease,opacity .25s ease;
}

.project-readmore:hover{opacity:.72;}

@media(max-width:640px){
.projects-grid{grid-template-columns:1fr;gap:24px;}
.project-body{padding:22px 20px 24px;}
.project-results{gap:20px;}
.project-facts{gap:20px;padding:18px 20px;}
}

/* ---------- FEATURED PROJECTS ON THE HOMEPAGE ---------- */
.projects-teaser{
padding:96px 0;
background:#ffffff;
}

.projects-teaser h2{text-align:center;}

.projects-intro{
text-align:center;
max-width:680px;
margin:14px auto 46px;
color:#6b7280;
font-size:15px;
line-height:1.7;
}

.projects-teaser .btn-outline{
display:table;
margin:48px auto 0;
}