/* MODENA MOTORS UAE — shared styles (black · white · red, Saira) */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --ink:#0A0A0B;
  --ink2:#101012;
  --paper:#FFFFFF;
  --paper2:#F5F5F6;
  --red:#A6301C;
  --red-bright:#C83820;
  --mist:#9A9AA0;
  --mist-l:#C8C8CE;
  --hairline:rgba(255,255,255,0.14);
  --hairline-red:rgba(166,48,28,0.5);
}
html{scroll-behavior:smooth;overflow-x:hidden;overflow-x:clip;max-width:100%}
body{background:var(--ink);color:var(--paper);font-family:'Saira',sans-serif;font-weight:300;overflow-x:hidden;overflow-x:clip;max-width:100%;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--paper)}
img{max-width:100%;height:auto;display:block}
a,button{touch-action:manipulation}
a:focus-visible,button:focus-visible{outline:2px solid var(--red-bright);outline-offset:3px}

/* TYPO HELPERS */
.label{font-family:'Saira',sans-serif;font-size:0.62rem;letter-spacing:0.42em;text-transform:uppercase;color:var(--mist)}
.label-red{color:var(--red-bright)}

/* REVEAL — hidden only when JS is active, so content never disappears without it */
html.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1.1s cubic-bezier(0.22,1,0.36,1),transform 1.1s cubic-bezier(0.22,1,0.36,1)}
html.js .rv.in{opacity:1;transform:none}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:200;display:flex;align-items:center;justify-content:space-between;padding:2rem 4rem;transition:background 0.5s,padding 0.5s,border-color 0.5s;border-bottom:1px solid transparent}
nav.s{background:rgba(10,10,11,0.92);padding:1.1rem 4rem;border-bottom-color:var(--hairline)}
/* le blur est retiré quand le menu est ouvert : backdrop-filter sur nav emprisonnerait le panneau fixed */
nav.s:not(.open){backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
nav.open{background:transparent;border-bottom-color:transparent}
.nlogo img{height:22px;width:auto}
.nlinks{display:flex;gap:2.6rem;list-style:none;align-items:center}
.nlinks a{color:var(--mist-l);text-decoration:none;font-size:0.66rem;letter-spacing:0.32em;text-transform:uppercase;transition:color 0.4s;padding-bottom:0.35rem;border-bottom:1px solid transparent}
.nlinks a:hover{color:var(--paper)}
.nlinks a.active{color:var(--paper);border-bottom-color:var(--red-bright)}
/* burger (mobile) */
.nburger{display:none;background:none;border:none;padding:0.6rem 0;cursor:pointer;flex-direction:column;gap:7px;z-index:300}
.nburger span{display:block;width:26px;height:2px;background:var(--paper);filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6));transition:transform 0.35s,opacity 0.35s}
nav.open .nburger span:first-child{transform:translateY(4px) rotate(45deg)}
nav.open .nburger span:last-child{transform:translateY(-4px) rotate(-45deg)}

/* HERO (home) */
.hero{height:100vh;height:100svh;position:relative;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:-12% 0 0;background:url('images/hero.jpg') center 45%/cover no-repeat;animation:heroScale 3.2s cubic-bezier(0.22,1,0.36,1) both;will-change:transform}
.hero-ov{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,11,0.5) 0%,rgba(10,10,11,0.12) 45%,rgba(10,10,11,0.82) 82%,var(--ink) 100%)}
/* cinematic grain */
.hero-grain{position:absolute;inset:0;opacity:0.07;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
/* word-by-word title reveal (progressive enhancement, JS splits words) */
h1 .w{display:inline-block;overflow:hidden;vertical-align:top}
h1 .w>span{display:inline-block;transform:translateY(112%);animation:wordUp 0.9s cubic-bezier(0.22,1,0.36,1) forwards}
/* scroll cue */
.h-scroll{position:absolute;bottom:2.6rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:0.7rem;animation:fadeUpCenter 1.2s 1.6s cubic-bezier(0.22,1,0.36,1) both}
@keyframes fadeUpCenter{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.h-scroll .t{font-size:0.52rem;letter-spacing:0.42em;text-transform:uppercase;color:var(--red-bright)}
.h-scroll .l{width:1px;height:44px;background:linear-gradient(to bottom,var(--red-bright),transparent);animation:cuePulse 2.4s ease-in-out infinite}
@keyframes wordUp{to{transform:translateY(0)}}
@keyframes cuePulse{0%,100%{opacity:1}50%{opacity:0.25}}
.hero-inner{position:relative;z-index:2;width:100%;padding:0 4rem 7rem}
.hero-rule{width:52px;height:1px;background:var(--red-bright);margin-bottom:2.2rem;transform-origin:left;animation:ruleIn 1.4s 0.5s cubic-bezier(0.22,1,0.36,1) both}
.hero-kicker{animation:fadeUp 1.2s 0.65s cubic-bezier(0.22,1,0.36,1) both}
h1{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:clamp(2.7rem,6vw,5.4rem);line-height:1.05;letter-spacing:0.045em;text-transform:uppercase;max-width:14em;margin-top:1.4rem;animation:fadeUp 1.2s 0.85s cubic-bezier(0.22,1,0.36,1) both}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:3.2rem;animation:fadeUp 1.2s 1.1s cubic-bezier(0.22,1,0.36,1) both}
.hero-link{color:var(--paper);text-decoration:none;font-size:0.66rem;letter-spacing:0.34em;text-transform:uppercase;display:inline-flex;align-items:center;gap:1rem;padding-bottom:0.5rem;border-bottom:1px solid var(--hairline-red);transition:border-color 0.4s,color 0.4s}
.hero-link:hover{border-bottom-color:var(--red-bright)}
.hero-loc{font-size:0.66rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--mist)}
@keyframes heroScale{from{transform:scale(1.06)}to{transform:scale(1)}}
@keyframes ruleIn{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* PAGE BAND (inner pages) */
.band{padding:12rem 4rem 6rem;max-width:1200px;margin:0 auto}
.band-rule{width:52px;height:1px;background:var(--red-bright);margin-bottom:2.2rem}
.band h1{margin-top:1.4rem;animation:none;font-size:clamp(2.4rem,5vw,4.4rem)}
.band .label{animation:none}
.band p.intro{max-width:520px;margin-top:2.2rem;font-size:0.92rem;line-height:2.2;color:var(--mist)}

/* STATEMENT */
.statement{padding:11rem 4rem;max-width:1060px;margin:0 auto;text-align:center}
.statement .label{display:block;margin-bottom:3rem}
.statement p.big{font-family:'Saira Condensed',sans-serif;font-weight:300;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.45;letter-spacing:0.025em;color:var(--paper)}
.statement p.big em{font-style:normal;color:var(--red-bright)}
.statement p.sub{margin:3rem auto 0;max-width:560px;font-size:0.92rem;line-height:2.2;color:var(--mist)}

/* MARQUES — slow marquee, faded edges (adapted from 21st.dev InfiniteSlider, pure CSS) */
.marques{padding:0 4rem 9rem;text-align:center}
.marques .mq{overflow:hidden;max-width:980px;margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent)}
.marques .track{display:flex;width:max-content;animation:mmq 46s linear infinite}
.marques .grp{display:flex;gap:4.5rem;padding-right:4.5rem}
.marques span{font-family:'Saira Condensed',sans-serif;font-size:0.86rem;letter-spacing:0.34em;text-transform:uppercase;color:#4A4A50;white-space:nowrap;transition:color 0.6s}
.marques span:hover{color:var(--mist-l)}
@keyframes mmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){
  .marques .track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
  .marques .mq{-webkit-mask-image:none;mask-image:none}
}

/* GALLERY — catalogue plates (white) */
.gallery{background:var(--paper);color:var(--ink);padding:10rem 4rem 11rem}
.gallery.compact{padding:9rem 4rem}
.g-head{max-width:1200px;margin:0 auto 7rem;display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;flex-wrap:wrap}
.g-head .label{color:#85858B}
.g-head h2{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:clamp(2rem,4vw,3.4rem);line-height:1.1;letter-spacing:0.05em;text-transform:uppercase;margin-top:1.2rem;color:var(--ink)}
.g-head p{max-width:360px;font-size:0.85rem;line-height:2.1;color:#6A6A70}
.g-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:5rem;row-gap:7rem}
.plate{position:relative}
.plate.full{grid-column:1/-1;max-width:880px;margin:0 auto;width:100%}
.plate.full.portrait{max-width:620px}
.plate:nth-child(odd):not(.full){transform:translateY(3.5rem)}
.plate-img{overflow:hidden;background:#FFFFFF;border:1px solid rgba(10,10,11,0.28);padding:10px}
.plate-img img{width:100%;height:auto;transition:transform 1.6s cubic-bezier(0.22,1,0.36,1)}
.plate:hover .plate-img img{transform:scale(1.025)}
.plate-cap{display:block;margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid rgba(10,10,11,0.16)}
.cap-top{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;margin-bottom:0.55rem}
.cap-title{white-space:nowrap;overflow:hidden}
.plate-num{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:0.8rem;letter-spacing:0.2em;color:var(--red)}
.plate-title{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--ink)}
.plate-make{font-size:0.6rem;letter-spacing:0.4em;text-transform:uppercase;color:#85858B}
.plate-meta{font-size:0.62rem;letter-spacing:0.24em;text-transform:uppercase;color:#85858B;text-align:right;white-space:nowrap}
.g-note{max-width:1200px;margin:7rem auto 0;text-align:center;font-size:0.8rem;line-height:2.2;color:#85858B;font-style:italic}
.g-more{max-width:1200px;margin:6rem auto 0;text-align:center}
.link-line{color:var(--ink);text-decoration:none;font-size:0.68rem;letter-spacing:0.34em;text-transform:uppercase;display:inline-flex;align-items:center;gap:1rem;padding-bottom:0.5rem;border-bottom:1px solid rgba(166,48,28,0.55);transition:border-color 0.4s}
.link-line:hover{border-bottom-color:var(--red-bright)}
.link-line.on-dark{color:var(--paper)}

/* PROCESS */
.process{padding:11rem 4rem}
.p-inner{max-width:1060px;margin:0 auto}
.p-head{margin-bottom:5.5rem}
.p-head h2{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:clamp(1.9rem,3.6vw,3rem);letter-spacing:0.05em;text-transform:uppercase;margin-top:1.2rem}
.p-step{display:grid;grid-template-columns:120px 1fr 1.4fr;gap:3rem;padding:3.2rem 0;border-top:1px solid var(--hairline);align-items:baseline}
.p-step:last-child{border-bottom:1px solid var(--hairline)}
.p-num{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:1.05rem;letter-spacing:0.25em;color:var(--red-bright)}
.p-t{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:1.2rem;letter-spacing:0.09em;text-transform:uppercase}
.p-d{font-size:0.88rem;line-height:2.15;color:var(--mist)}

/* ABOUT */
.about{padding:6rem 4rem 11rem}
.a-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:1fr 1.05fr;gap:6rem;align-items:center}
.a-img{position:relative;overflow:hidden}
.a-img img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:46% 62%;filter:brightness(0.9) saturate(0.95);transition:transform 1.8s cubic-bezier(0.22,1,0.36,1)}
.a-img:hover img{transform:scale(1.03)}
.a-quote{font-family:'Saira Condensed',sans-serif;font-weight:300;font-size:clamp(1.45rem,2.6vw,2rem);line-height:1.55;letter-spacing:0.025em;margin:1.6rem 0 2.4rem}
.a-quote em{font-style:normal;color:var(--red-bright)}
.a-p{font-size:0.9rem;line-height:2.25;color:var(--mist);max-width:460px}
.a-tags{display:flex;flex-wrap:wrap;gap:0.6rem 1.8rem;margin-top:2.6rem}
.a-tags span{font-size:0.6rem;letter-spacing:0.3em;text-transform:uppercase;color:var(--mist);padding-bottom:0.4rem;border-bottom:1px solid var(--hairline)}

/* APP (Private Sourcing page) */
.app{padding:4rem 4rem 11rem}
.app-inner{max-width:1060px;margin:0 auto}
.app-rows{margin-top:4rem}
.app-row{display:grid;grid-template-columns:120px 1fr 1.4fr;gap:3rem;padding:3rem 0;border-top:1px solid var(--hairline);align-items:baseline}
.app-row:last-child{border-bottom:1px solid var(--hairline)}
.app-cta{margin-top:5.5rem;display:flex;align-items:center;gap:3.5rem;flex-wrap:wrap}
.btn-line{display:inline-flex;align-items:center;gap:1.1rem;color:var(--paper);text-decoration:none;font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:0.78rem;letter-spacing:0.3em;text-transform:uppercase;padding:1.15rem 3rem;border:1px solid var(--hairline-red);transition:border-color 0.4s,background 0.4s}
.btn-line:hover{border-color:var(--red-bright);background:rgba(166,48,28,0.08)}
.app-cta .note{font-size:0.78rem;line-height:2;color:#5A5A60;font-style:italic;max-width:320px}

/* CONTACT */
.contact{padding:10rem 4rem 9rem;border-top:1px solid var(--hairline);text-align:center}
.contact h2{font-family:'Saira Condensed',sans-serif;font-weight:500;font-size:clamp(2rem,4.4vw,3.6rem);letter-spacing:0.05em;text-transform:uppercase;margin-top:1.4rem;line-height:1.15}
.contact .intro{max-width:520px;margin:2.6rem auto 0;font-size:0.9rem;line-height:2.25;color:var(--mist)}
.c-lines{max-width:520px;margin:4.5rem auto 0;text-align:left}
.c-line{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.7rem 0;border-top:1px solid var(--hairline)}
.c-line:last-child{border-bottom:1px solid var(--hairline)}
.c-line .k{font-size:0.6rem;letter-spacing:0.38em;text-transform:uppercase;color:var(--mist)}
.c-line .v{font-family:'Saira Condensed',sans-serif;font-size:1rem;letter-spacing:0.06em}
.c-line .v a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--hairline-red);padding-bottom:0.2rem;transition:border-color 0.4s}
.c-line .v a:hover{border-bottom-color:var(--red-bright)}
.c-line .v a.waLink{border-bottom:none;display:inline-flex;padding-bottom:0;color:var(--paper);transition:color 0.4s}
.c-line .v a.waLink:hover{color:var(--red-bright)}
.c-note{margin-top:3.6rem;font-size:0.78rem;line-height:2.2;color:#5A5A60;font-style:italic}

/* FOOTER */
footer{padding:3.4rem 4rem;border-top:1px solid var(--hairline);display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.f-logo img{height:16px;width:auto;opacity:0.85}
.f-links{display:flex;gap:2.2rem;list-style:none}
.f-links a{color:#4A4A50;text-decoration:none;font-size:0.6rem;letter-spacing:0.26em;text-transform:uppercase;transition:color 0.4s}
.f-links a:hover{color:var(--paper)}
.f-copy{font-size:0.6rem;letter-spacing:0.26em;text-transform:uppercase;color:#4A4A50}

/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  html.js .rv{opacity:1;transform:none;transition:none}
  .hero-bg,.hero-rule,.hero-kicker,h1,.hero-foot,.h-scroll,.h-scroll .l{animation:none}
  h1 .w>span{transform:none;animation:none}
  .plate-img img,.a-img img{transition:none}
}

/* RESPONSIVE */
@media(max-width:1024px){
  nav,nav.s{padding:1.2rem 1.6rem}
  .nlinks{gap:1.4rem}
  .nlinks a{font-size:0.58rem;letter-spacing:0.22em}
  .hero-inner{padding:0 1.6rem 5rem}
  .band{padding:9rem 1.6rem 4rem}
  .statement{padding:7rem 1.6rem}
  .marques{padding:0 1.6rem 6rem}
  .gallery,.gallery.compact{padding:6rem 1.6rem 7rem}
  .g-grid{column-gap:2rem;row-gap:4.5rem}
  .process,.about,.contact,.app{padding-left:1.6rem;padding-right:1.6rem}
  .process{padding-top:7rem;padding-bottom:7rem}
  .about,.app{padding-bottom:7rem}
  .a-inner{grid-template-columns:1fr;gap:3.4rem}
  .p-step,.app-row{grid-template-columns:70px 1fr;gap:1.4rem}
  .p-step .p-d,.app-row .p-d{grid-column:2}
  footer{padding:2.6rem 1.6rem;flex-direction:column;text-align:center}
  .f-links{flex-wrap:wrap;justify-content:center;gap:0.9rem 1.7rem}
  .f-links a{white-space:nowrap}
}
@media(max-width:640px){
  /* légendes des planches : titre + couleur sur une seule ligne, taille adaptée */
  .plate-title{font-size:0.8rem;letter-spacing:0.05em}
  .plate-num{font-size:0.7rem}
  .plate-img{padding:6px}
  .nburger{display:flex}
  .nlinks{display:none;position:fixed;inset:0;background:rgba(10,10,11,0.97);backdrop-filter:blur(10px);flex-direction:column;justify-content:center;align-items:center;gap:2.6rem;z-index:250;overscroll-behavior:contain;touch-action:none}
  .nlinks a{touch-action:manipulation}
  nav.open .nlinks{display:flex}
  .nlinks a{font-family:'Saira Condensed',sans-serif;font-size:1.15rem;font-weight:500;letter-spacing:0.3em}
  .hero-bg{background-position:26% 52%}
  .hero-inner{padding-bottom:8.5rem}
  .h-scroll{bottom:1.4rem}
  .h-scroll .l{height:34px}
  .g-grid{grid-template-columns:1fr;row-gap:4rem}
  .plate:nth-child(odd):not(.full){transform:none}
  .g-head{margin-bottom:4rem}
  .contact{padding-top:7rem}
  .c-line{flex-direction:column;gap:0.5rem}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .app-cta{gap:2rem}
  .btn-line{width:100%;justify-content:center}
}