:root{

--burgundy:#7a0f1a;
--burgundy-dark:#5c0b14;

--black:#111111;
--white:#ffffff;

--light:#f4f4f6;

--muted:#6b7280;

--transition:all .35s ease;

}

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

html{
scroll-behavior:smooth;
}

body{

font-family:'Inter',sans-serif;

background:var(--white);

color:var(--black);

overflow-x:hidden;

line-height:1.7;

}

.container{

width:92%;
max-width:1200px;

margin:auto;

}

/* TYPOGRAPHY */

h1,h2,h3{

font-family:'Playfair Display',serif;
font-weight:700;

}

h1{
font-size:clamp(36px,5vw,58px);
line-height:1.15;
}

h2{
font-size:clamp(30px,4vw,44px);
line-height:1.2;
}

h3{
font-size:24px;
}

p{
font-size:17px;
color:#444;
}

section{
padding:110px 0;
}

/* NAVBAR */

#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-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 ul{

display:flex;
align-items:center;
gap:8px;

list-style:none;

flex-wrap:nowrap;

}

.nav-link{

text-decoration:none;
color:var(--black);

font-weight:500;
font-size:14px;

white-space:nowrap;

padding:6px 8px;

border-radius:20px;

transition:var(--transition);

}

.nav-link:hover{

background:rgba(122,15,26,.06);
color:var(--burgundy);

}

.active{

color:var(--burgundy);
font-weight:700;

}

.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 */

/* =========================
   LANGUAGE SWITCH
========================= */

.lang-switch{

border:none;

background:transparent;

cursor:pointer;

position:relative;

animation:
langPulse 3.5s ease-in-out infinite;

flex-shrink:0;

}

/* SOFT ATTENTION PULSE */
@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;

}

/* HOVER EFFECT */
.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)
);

}

/* SLIDING THUMB */
.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;

}

/* TEXT */
.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;

}

/* SMALL SHIMMER EFFECT */
.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%;
}

}

/* HERO */

.page-hero{

background:
linear-gradient(135deg,#0e0e14,#1b1b26);

color:white;

padding-top:210px;
padding-bottom:170px;

text-align:center;

}

.hero-badge{

display:inline-flex;

padding:10px 18px;

border-radius:50px;

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

border:1px solid rgba(255,255,255,.12);

margin-bottom:30px;

font-size:14px;

}

.page-hero p{

max-width:760px;

margin:25px auto;

color:rgba(255,255,255,.85);

}

.hero-actions{

display:flex;
justify-content:center;
gap:18px;

margin-top:40px;

flex-wrap:wrap;

}

/* BUTTONS */

.btn-primary{

background:
linear-gradient(
135deg,
var(--burgundy),
#a01a29
);

color:white;

padding:14px 32px;

border-radius:50px;

text-decoration:none;

font-weight:600;

transition:var(--transition);

display:inline-block;

}

.btn-primary:hover{

transform:translateY(-3px);

box-shadow:
0 15px 30px rgba(122,15,26,.25);

}

.btn-outline{

border:1px solid rgba(255,255,255,.4);

padding:14px 32px;

border-radius:50px;

text-decoration:none;

color:white;

transition:var(--transition);

}

.btn-outline:hover{

background:white;
color:var(--black);

}

/* INTRO */

.intro-section{
padding:110px 0;
}

.intro-grid{

display:grid;

grid-template-columns:1.1fr .9fr;

gap:70px;

align-items:center;

}

.intro-text h2{

margin-bottom:20px;

}

.intro-text p{

margin-bottom:20px;

}

.intro-text p:last-of-type{

margin-bottom:0;

}

.sector-list{

list-style:none;

margin:4px 0 24px;

padding:0;

display:flex;
flex-direction:column;
gap:16px;

}

.sector-item{

position:relative;

padding-left:22px;

font-size:17px;
color:#444;
line-height:1.7;

}

.sector-item::before{

content:"";

position:absolute;

left:0;
top:9px;

width:8px;
height:8px;

border-radius:50%;

background:var(--burgundy);

}

.sector-item strong{

color:var(--burgundy);
font-weight:700;

}

.section-tag{

font-size:13px;
font-weight:700;

letter-spacing:2px;

color:var(--burgundy);

margin-bottom:18px;

}

.center{
text-align:center;
}

.center-title{
text-align:center;
margin-bottom:20px;
}

.founder-img-wrap img{

width:100%;

border-radius:28px;

box-shadow:
0 25px 60px rgba(0,0,0,.16);

}

.credibility-strip{

display:flex;
gap:20px;

margin-top:40px;

flex-wrap:wrap;

}

.credibility-item{

background:white;

padding:20px 24px;

border-radius:20px;

box-shadow:
0 12px 30px rgba(0,0,0,.06);

font-weight:600;

min-width:150px;

}

.credibility-item span{

display:block;

font-size:30px;
font-weight:700;

color:var(--burgundy);

margin-bottom:6px;

}

.credibility-item span.credibility-value-sm{

font-size:19px;
letter-spacing:.2px;

}

/* IN ACTION GALLERY */

.gallery-section{
padding:20px 0 100px;
}

.gallery-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(320px,1fr));

gap:32px;

margin-top:55px;

}

.gallery-item img{

width:100%;

aspect-ratio:4/3;

object-fit:cover;

object-position:50% 50%;

border-radius:24px;

box-shadow:
0 20px 50px rgba(0,0,0,.12);

}

.gallery-item img.face-top{

object-position:50% 26%;

}

.gallery-item p{

margin-top:18px;

text-align:center;

color:#4b5563;

font-size:15px;

}

/* CARDS */
/* =========================
   VALUES GRID
========================= */

/* =========================
   VALUES GRID
========================= */

.values-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:32px;

margin-top:60px;

}

/* CARD */

.value-box{

position:relative;

overflow:hidden;

padding:42px 34px;

border-radius:24px;

background-color:#ffffff;

border:1px solid rgba(122,15,26,.08);

box-shadow:
0 10px 30px rgba(0,0,0,.05);

transition:
transform .45s cubic-bezier(.2,.8,.2,1),
background-color .45s ease,
box-shadow .45s ease,
border-color .45s ease;

}

/* TITLE */

.value-box h3{

margin-bottom:16px;

color:var(--black);

transition:color .35s ease;

position:relative;

z-index:2;

}

/* TEXT */

.value-box p{

color:#4b5563;

transition:color .35s ease;

position:relative;

z-index:2;

}

/* HOVER */

.value-box:hover{

background-color:var(--burgundy);

border-color:var(--burgundy);

transform:translateY(-10px);

box-shadow:
0 22px 50px rgba(122,15,26,.28);

}

/* TEXT ON HOVER */

.value-box:hover h3,
.value-box:hover p{

color:#ffffff;

}

.value-box::before{

content:"";

position:absolute;

inset:0;

background:
linear-gradient(
135deg,
rgba(255,255,255,.12),
rgba(255,255,255,0)
);

opacity:0;

transition:opacity .45s ease;

}

.value-box:hover::before{

opacity:1;

}
.support-grid,
.approach-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:30px;

margin-top:55px;

}


.support-card,
.approach-step{

background:white;

padding:36px;

border-radius:28px;

border:1px solid rgba(0,0,0,.05);

box-shadow:
0 15px 40px rgba(0,0,0,.05);

transition:var(--transition);

}

.support-card:hover,
.approach-step:hover{

transform:translateY(-8px);

box-shadow:
0 25px 50px rgba(0,0,0,.08);

}

.approach-section{
background:var(--light);
}

/* CORE SKILLS */

.skills-section{
padding:100px 0;
}

.skills-grid{

display:flex;
flex-wrap:wrap;

justify-content:center;

gap:14px;

margin-top:50px;

}

.skill-pill{

display:inline-flex;
align-items:center;

padding:12px 22px;

border-radius:50px;

background:#ffffff;

border:1px solid rgba(122,15,26,.15);

box-shadow:
0 8px 20px rgba(0,0,0,.04);

font-size:14.5px;
font-weight:600;

color:var(--burgundy);

transition:
transform .3s ease,
background .3s ease,
color .3s ease,
box-shadow .3s ease;

}

.skill-pill:hover{

transform:translateY(-4px);

background:var(--burgundy);

color:#ffffff;

box-shadow:
0 14px 30px rgba(122,15,26,.25);

}

.step-number{

font-size:42px;
font-weight:700;

color:rgba(122,15,26,.15);

margin-bottom:20px;

}

/* CTA */

.cta-section{

background:
linear-gradient(135deg,#111,#1c1c28);

color:white;

text-align:center;

padding:120px 0;

}

.cta-section p{

max-width:700px;

margin:20px auto 40px;

color:rgba(255,255,255,.8);

}

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

/* ANIMATION */

.fade-in{

opacity:0;
transform:translateY(60px);

transition:all 1s ease;

}

.fade-in.visible{

opacity:1;
transform:translateY(0);

}

/* MOBILE */

.hamburger{
display:none;
}

#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;

width:46px;
height:46px;

border:none;

background:
rgba(122,15,26,.08);

border-radius:12px;

align-items:center;
justify-content:center;

cursor:pointer;
}

html.nav-collapsed .hamburger .bar, html.nav-collapsed .hamburger .bar::before, html.nav-collapsed .hamburger .bar::after{
content:"";

display:block;

width:22px;
height:2px;

background:var(--burgundy);

border-radius:2px;

position:relative;
}

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

html.nav-collapsed .hamburger .bar::after{
position:absolute;
top:6px;
}

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);
}


/* Layout that genuinely depends on screen width. */
@media(max-width:1080px){


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

.page-hero{
padding-top:180px;
}

h1{
font-size:36px;
}

.hero-actions{
flex-direction:column;
align-items:center;
}

}


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