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


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

.page-hero{
  background:
  radial-gradient(circle at 20% 30%, rgba(122,15,26,.3), transparent 40%),
  linear-gradient(135deg,#1b1b26,#2a2a36);
  color:white;
    text-align:center;
  padding-top:190px;
  padding-bottom:160px;
}

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

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

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

/* =====================
   SERVICE BLOCKS
===================== */

.service-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.service-block.reverse{
  direction:rtl;
}
.service-block.reverse div{
  direction:ltr;
}

.service-content h3{
  font-size:30px;
  margin-bottom:20px;
  color:var(--burgundy);
}

.service-content ul{
  margin-top:20px;
  padding-left:20px;
}

.service-content li{
  margin-bottom:10px;
}

.service-visual{
  background:rgba(122,15,26,.06);
  height:280px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  color:var(--burgundy);
  text-align:center;
  padding:20px;
}

/* Photo variant: when a service-visual card holds an image
   instead of placeholder text, drop the padding and let the
   photo fill the card with clipped rounded corners. */
.service-visual:has(img){
padding:0;
overflow:hidden;
background:var(--light);
}

.service-visual img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* =====================
   DELIVERY SECTION
===================== */

.delivery{
  background:var(--light);
  text-align:center;
}

.delivery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:40px;
  margin-top:60px;
}

.delivery-box{
  background:white;
  padding:40px;
  border-radius:20px;
  transition:var(--transition);
}

.delivery-box:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 50px rgba(0,0,0,.08);
}


/* =====================
   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:992px){
  .service-block{
    grid-template-columns:1fr;
  }
  .service-block.reverse{
    direction:ltr;
  }
}

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

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

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