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

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

.testimonials-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:40px;
  margin-top:10px;
  /* 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:520px;
  position:relative;
  overflow:hidden;
}

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

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

@media(max-width:768px){
  .page-hero h1{font-size:34px;}
  .testimonial-card{
    padding:50px 30px 32px;
  }
}


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

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

.content-loading,
.content-empty{
  text-align:center;color:var(--muted);font-size:15px;padding:40px 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);
}

/* =====================
   SHARE YOUR EXPERIENCE FORM
===================== */

.share-section{padding:20px 0 10px;}

.share-form{
  max-width:760px;margin:auto;background:#fff;
  border-radius:20px;padding:48px 50px 42px;
  box-shadow:0 20px 50px rgba(0,0,0,.07);
  display:flex;flex-direction:column;gap:22px;
}

.share-note{
  background:rgba(122,15,26,.05);
  border-left:4px solid var(--burgundy);
  border-radius:10px;padding:14px 18px;
  font-size:14.5px;color:var(--muted);line-height:1.65;margin:0;
}

.share-row{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.share-field{display:flex;flex-direction:column;}

.share-field label{
  font-weight:600;font-size:14px;margin-bottom:8px;color:var(--black);
}

.share-field input,
.share-field textarea{
  width:100%;padding:13px 16px;
  border:1.5px solid rgba(0,0,0,.12);border-radius:10px;
  font-family:'Inter',sans-serif;font-size:15px;line-height:1.6;
  background:#fff;color:var(--black);
  transition:border-color .25s ease, box-shadow .25s ease;
}

.share-field input:focus,
.share-field textarea:focus{
  outline:none;border-color:var(--burgundy);
  box-shadow:0 0 0 3px rgba(122,15,26,.08);
}

.share-field textarea{resize:vertical;min-height:170px;}

.share-count{font-size:12.5px;color:var(--muted);text-align:right;margin-top:6px;}

.share-consent{
  display:flex;align-items:flex-start;gap:12px;
  font-size:14px;line-height:1.6;color:var(--muted);cursor:pointer;
}

.share-consent input{
  width:19px;height:19px;flex-shrink:0;margin-top:2px;
  accent-color:var(--burgundy);cursor:pointer;
}

.share-form .btn-primary{align-self:flex-start;border:none;cursor:pointer;}
.share-form .btn-primary:disabled{opacity:.6;cursor:wait;}

.share-privacy{font-size:12.5px;color:var(--muted);line-height:1.6;margin:0;}

#shareTooltip{
  display:none;padding:13px 17px;border-radius:9px;
  font-size:14px;font-weight:500;line-height:1.5;
}
#shareTooltip.error{background:#ffe6e6;color:#a40000;border-left:4px solid #ff3b3b;}
#shareTooltip.success{background:#e9fff1;color:#006b2d;border-left:4px solid #00b34a;}

/* Secondary button used on the testimonials page */
.btn-secondary{
  display:inline-block;padding:14px 34px;border-radius:50px;
  font-weight:600;font-size:15px;text-decoration:none;
  border:1.5px solid rgba(255,255,255,.55);color:#fff;
  transition:all .25s ease;
}
.btn-secondary:hover{background:rgba(255,255,255,.12);border-color:#fff;}

@media(max-width:768px){
  .share-form{padding:34px 24px 30px;border-radius:16px;}
  .share-row{grid-template-columns:1fr;gap:20px;}
}

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