/* ============================================================
   EDM AUTO CARE — Shared design system
   Black & gold. Showroom shine, delivered to your driveway.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,500&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=Manrope:wght@300;400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root{
  --bg:#0A0A0A;
  --bg-2:#111010;
  --card:#141110;
  --card-2:#191512;
  --gold:#C9A24B;
  --gold-light:#E5C87E;
  --gold-deep:#8C6D2F;
  --line:#8C6D2F;
  --text:#D6CDBA;
  --text-dim:#9C927F;
  --bronze:#B07A45;
  --silver:#C9CBD0;

  --gold-grad:linear-gradient(135deg,#E5C87E 0%,#C9A24B 48%,#8C6D2F 100%);
  --bronze-grad:linear-gradient(135deg,#E0A877 0%,#B07A45 50%,#7A4E26 100%);
  --silver-grad:linear-gradient(135deg,#F2F3F5 0%,#C9CBD0 50%,#8A8D93 100%);
  --gold-grad-soft:linear-gradient(135deg,#E5C87E,#C9A24B);

  --font-serif:'Playfair Display';
  --font-sans:'Manrope';

  --hero-overlay:0.18;

  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --radius:3px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-sans),system-ui,sans-serif;
  font-weight:400;
  line-height:1.6;
  font-size:17px;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--gold);color:#0a0a0a;}

/* film grain + vignette utility for cinematic dark feel */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.04;mix-blend-mode:overlay;
}

/* ---- Type ---- */
.serif{font-family:var(--font-serif),Georgia,serif;}
h1,h2,h3,h4{font-family:var(--font-serif),Georgia,serif;font-weight:700;line-height:1.06;margin:0;letter-spacing:.002em;}
p{margin:0;}
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* numbered section label  ·  / 01 — SERVICES */
.label{
  font-family:var(--font-sans);
  font-size:.74rem;font-weight:600;
  letter-spacing:.32em;text-transform:uppercase;
  color:var(--text-dim);
  display:inline-flex;align-items:center;gap:.85em;
}
.label .num{color:var(--gold);font-weight:700;}
.label .dash{width:34px;height:1px;background:var(--gold-deep);display:inline-block;}

.eyebrow{
  font-family:var(--font-sans);font-size:.72rem;font-weight:600;
  letter-spacing:.34em;text-transform:uppercase;color:var(--gold);
}

/* ---- Layout ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
section{position:relative;}
.section{padding:clamp(64px,9vw,128px) 0;}
.divider{height:1px;border:0;margin:0;
  background:linear-gradient(90deg,transparent,var(--gold-deep) 22%,var(--gold) 50%,var(--gold-deep) 78%,transparent);
  opacity:.55;}

.section-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(36px,5vw,60px);}
.section-head h2{font-size:clamp(2.1rem,4.6vw,3.6rem);}
.section-head .sub{color:var(--text-dim);max-width:52ch;font-size:1.05rem;}

/* ---- Buttons ---- */
.btn{
  --gl:0;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-sans);font-weight:600;font-size:.86rem;
  letter-spacing:.14em;text-transform:uppercase;
  padding:1.05em 2.1em;border-radius:var(--radius);
  cursor:pointer;border:1px solid transparent;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
  position:relative;white-space:nowrap;
}
.btn-primary{background:var(--gold-grad);color:#0c0a07;border-color:var(--gold-light);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(201,162,75,.55),0 0 0 1px rgba(229,200,126,.4);}
.btn-ghost{background:transparent;color:var(--gold-light);border-color:var(--gold-deep);}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 26px -6px rgba(201,162,75,.4);background:rgba(201,162,75,.06);}
.btn-sm{padding:.85em 1.5em;font-size:.76rem;}
.arrow{transition:transform .4s var(--ease);}
.btn:hover .arrow,.link-arrow:hover .arrow{transform:translateX(5px);}

.link-arrow{display:inline-flex;align-items:center;gap:.6em;color:var(--gold-light);
  font-family:var(--font-sans);font-weight:600;font-size:.84rem;letter-spacing:.14em;text-transform:uppercase;
  padding-bottom:3px;border-bottom:1px solid var(--gold-deep);transition:border-color .35s,color .35s;}
.link-arrow:hover{color:var(--gold);border-color:var(--gold);}

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--pad);
  transition:background .5s var(--ease),backdrop-filter .5s,border-color .5s,padding .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(8,8,8,.82);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:rgba(140,109,47,.32);padding-top:12px;padding-bottom:12px;
}
.nav__logo{display:flex;align-items:center;gap:13px;}
.nav__logo img{height:46px;width:auto;transition:height .5s var(--ease);}
.nav.scrolled .nav__logo img{height:38px;}
.nav__links{display:flex;align-items:center;gap:38px;}
.nav__links a:not(.btn){
  font-family:var(--font-sans);font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text);opacity:.82;position:relative;padding:6px 0;transition:opacity .3s,color .3s;
}
.nav__links a:not(.btn):hover{opacity:1;color:var(--gold-light);}
.nav__links a:not(.btn).active{color:var(--gold);opacity:1;}
.nav__links a:not(.btn)::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--gold);transition:right .35s var(--ease);}
.nav__links a:not(.btn):hover::after,.nav__links a:not(.btn).active::after{right:0;}

.nav__burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav__burger span{width:24px;height:2px;background:var(--gold);transition:.35s var(--ease);}

/* language toggle (EN / FR) — injected by js/i18n.js */
.lang-switch{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--gold-deep);border-radius:40px;padding:3px;}
.lang-switch button{font-family:var(--font-sans);font-weight:700;font-size:.68rem;letter-spacing:.08em;
  color:var(--text-dim);background:none;border:0;cursor:pointer;padding:5px 9px;border-radius:40px;line-height:1;
  transition:color .3s var(--ease),background .3s var(--ease);}
.lang-switch button.active{background:var(--gold-grad);color:#0c0a07;}
.lang-switch button:hover:not(.active){color:var(--gold-light);}
.drawer .lang-switch{margin-top:10px;}
.drawer .lang-switch button{font-size:.95rem;padding:9px 18px;}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:49;background:rgba(7,7,7,.97);backdrop-filter:blur(8px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:30px;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);}
.drawer.open{opacity:1;pointer-events:auto;}
.drawer a:not(.btn){font-family:var(--font-serif);font-size:2rem;color:var(--text);}
.drawer a.active{color:var(--gold);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{border-top:1px solid rgba(140,109,47,.3);background:var(--bg-2);padding:clamp(56px,7vw,84px) 0 36px;}
.footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:48px;align-items:start;}
.footer__brand img{height:74px;margin-bottom:18px;}
.footer__brand .tag{font-family:var(--font-serif);font-style:italic;font-size:1.3rem;color:var(--gold-light);max-width:24ch;line-height:1.3;}
.footer h5{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0 0 18px;font-weight:700;}
.footer__col a,.footer__col p{display:block;color:var(--text-dim);font-size:.95rem;padding:5px 0;transition:color .3s;}
.footer__col a:hover{color:var(--gold-light);}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  margin-top:clamp(40px,6vw,64px);padding-top:26px;border-top:1px solid rgba(140,109,47,.18);
  font-size:.8rem;color:var(--text-dim);letter-spacing:.04em;}
.footer__socials{display:flex;gap:14px;}
.footer__socials a{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--gold-deep);border-radius:50%;transition:.35s var(--ease);color:var(--gold-light);}
.footer__socials a:hover{background:var(--gold);color:#0a0a0a;transform:translateY(-2px);border-color:var(--gold);}
.footer__socials svg{width:17px;height:17px;}

/* ---- reveal on scroll ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);}
.reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .nav__links{display:none;}
  .nav__burger{display:flex;}
  .footer__grid{grid-template-columns:1fr 1fr;gap:36px;}
  .footer__brand{grid-column:1 / -1;}
}
@media (max-width:560px){
  body{font-size:16px;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;align-items:flex-start;}
}