/* =====================
   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;
}

h1{
font-size: clamp(34px,5vw,56px);
}

h2{
font-size: clamp(28px,4vw,42px);
}

h3{
font-size: clamp(22px,3vw,32px);
}

p{
font-size: clamp(15px,1.4vw,17px);
}

.container{
width:92%;
max-width:1250px;
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:50px 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
===================== */
.page-hero{
  background:linear-gradient(135deg,#0e0e14,#1b1b26);
  color:white;
    text-align:center;
  padding-top:190px;
  padding-bottom:100px;
}

.page-hero .container{
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}

.page-hero h1{
  font-size:48px;
  margin-bottom:25px;
}

.page-hero p{
  font-size:18px;
  max-width:750px;
  opacity:.9;
}

/* =====================
   PROCESS STEPS
===================== */

.process-container{
  max-width:900px;
  margin:auto;
  position:relative;
}

.process-step{
  display:flex;
  gap:40px;
  margin-bottom:100px;
  align-items:flex-start;
}

.step-number{
  font-size:28px;
  font-weight:700;
  color:white;
  background:var(--burgundy);
  min-width:70px;
  height:70px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 30px rgba(122,15,26,.3);
}

.step-content h3{
  font-size:28px;
  margin-bottom:15px;
  color:var(--burgundy);
}

.step-content p{
  max-width:650px;
}

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

@media(max-width:768px){
  .page-hero h1{font-size:34px;}
  .process-step{
    flex-direction:column;
    align-items:flex-start;
  }
}


/* =====================
   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);
}

/* ---------- 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;
}