/* ============================================================
   EUSKADI R COOL — NEO RETRO CUSTOM
   Ultra-condensed · High contrast · Alternating B&W · Hot-rod
   Fonts: Big Shoulders Display (display) · Space Mono (label) · DM Sans (body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700;800;900&family=Space+Mono:wght@400;700&family=DM+Sans:wght@300;400;500;600&display=swap');

/* ── TOKENS ─────────────────────────────────────────────────── */
:root {
  --black:    #0C0C0C;
  --black-2:  #141414;
  --black-3:  #1C1C1C;
  --white:    #F4F2EE;
  --white-2:  #ECEAE5;
  --white-3:  #E0DDD7;
  --red:      #D93A2A;
  --red-dk:   #B8301F;
  --yellow:   #F2C12E;
  --yellow-dk:#D4A420;
  --muted-dk: #666660;   /* muted on dark bg */
  --muted-lt: #6B6860;   /* muted on light bg */

  --font-display: 'Big Shoulders Display', 'Impact', sans-serif;
  --font-label:   'Space Mono', 'Courier New', monospace;
  --font-body:    'DM Sans', system-ui, sans-serif;

  --ease-out:    cubic-bezier(0.16,1,0.3,1);
  --ease-in:     cubic-bezier(0.7,0,0.84,0);
  --ease-sharp:  cubic-bezier(0.4,0,0,1);
  --ease-bounce: cubic-bezier(0.34,1.4,0.64,1);

  --z-nav:     100;
  --z-cursor:  9999;
  --z-curtain: 9000;
  --z-lightbox:8000;

  /* Racing stripe diagonal pattern */
  --stripe-dk: repeating-linear-gradient(
    -45deg,
    transparent, transparent 3px,
    rgba(242,193,46,0.06) 3px, rgba(242,193,46,0.06) 6px
  );
  --stripe-lt: repeating-linear-gradient(
    -45deg,
    transparent, transparent 3px,
    rgba(217,58,42,0.05) 3px, rgba(217,58,42,0.05) 6px
  );
}

/* ── RESET ───────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font-body);
  font-weight:400;
  line-height:1.65;
  cursor:none;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{cursor:none;font-family:inherit;border:none;background:none}
ul,ol{list-style:none}

/* ── SECTION THEMING ─────────────────────────────────────────── */
.bg-dark{background:var(--black);color:var(--white)}
.bg-dark-2{background:var(--black-2);color:var(--white)}
.bg-light{background:var(--white);color:var(--black)}
.bg-light-2{background:var(--white-2);color:var(--black)}

/* ── TYPOGRAPHY ──────────────────────────────────────────────── */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:900;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:-.01em;
}
h1{font-size:clamp(3rem,9vw,7.5rem)}
h2{font-size:clamp(2.25rem,6vw,5.25rem)}
h3{font-size:clamp(1.35rem,3vw,2.25rem)}
h4{
  font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.02em;
}
h5{
  font-family:var(--font-display);
  font-weight:700;font-size:.9rem;
  text-transform:uppercase;letter-spacing:.04em;
}
p{font-size:clamp(.95rem,1.4vw,1.05rem);line-height:1.72;font-weight:400}

.eyebrow{
  display:inline-flex;align-items:center;gap:.75rem;
  font-family:var(--font-label);
  font-size:.68rem;letter-spacing:.25em;text-transform:uppercase;
  color:var(--red);margin-bottom:1rem;
}
.eyebrow::before{content:'//';opacity:.5}
.accent{color:var(--red)}
.accent-y{color:var(--yellow)}
.container{width:min(90rem,92%);margin-inline:auto}
.section{padding:clamp(5rem,10vw,9rem) 0}

/* ── THICK RULE ──────────────────────────────────────────────── */
.rule{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.rule-line{height:4px;background:var(--red);flex:0 0 3rem}
.rule-dot{width:8px;height:8px;border-radius:50%;background:var(--yellow);flex-shrink:0}

/* ── CUSTOM CURSOR — ROUE ────────────────────────────────────── */

/* Moyeu central */
.c-cursor{
  position:fixed;
  width:7px;height:7px;
  border-radius:50%;
  background:var(--red);
  pointer-events:none;z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s;
  box-shadow:0 0 0 1.5px var(--red), 0 0 0 2px var(--black);
}

/* Jante — positionnement par JS, rotation sur ::after */
.c-cursor-ring{
  position:fixed;
  width:19px;height:19px;
  border-radius:50%;
  pointer-events:none;z-index:var(--z-cursor);
  transform:translate(-50%,-50%);
}

/* Roue qui tourne — indépendant du transform de positionnement */
.c-cursor-ring::after{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  border:2px solid var(--red);
  /* 4 rayons */
  background:conic-gradient(
    rgba(217,58,42,.7)   0deg   5deg,
    transparent          5deg  85deg,
    rgba(217,58,42,.7)  85deg  95deg,
    transparent         95deg 175deg,
    rgba(217,58,42,.7) 175deg 185deg,
    transparent        185deg 265deg,
    rgba(217,58,42,.7) 265deg 275deg,
    transparent        275deg 360deg
  );
  opacity:.8;
  animation:wheel-spin 2s linear infinite;
}

@keyframes wheel-spin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* Hover sur liens */
body:has(a:hover) .c-cursor{
  background:var(--yellow);width:8px;height:8px;
  box-shadow:0 0 0 1.5px var(--yellow), 0 0 0 2px var(--black);
}
body:has(a:hover) .c-cursor-ring{
  width:24px;height:24px;
}
body:has(a:hover) .c-cursor-ring::after{
  border-color:var(--yellow);
  background:conic-gradient(
    rgba(242,193,46,.8)   0deg   5deg,
    transparent           5deg  85deg,
    rgba(242,193,46,.8)  85deg  95deg,
    transparent          95deg 175deg,
    rgba(242,193,46,.8) 175deg 185deg,
    transparent         185deg 265deg,
    rgba(242,193,46,.8) 265deg 275deg,
    transparent         275deg 360deg
  );
  animation-duration:1.2s;
}

/* ── PAGE CURTAIN ────────────────────────────────────────────── */
.page-curtain{
  position:fixed;inset:0;display:flex;
  pointer-events:none;z-index:var(--z-curtain);
}
.curtain-strip{
  flex:1;background:var(--red);
  transform:scaleY(0);transform-origin:bottom;
  transition:transform .45s var(--ease-in);
}
body.is-leaving .curtain-strip{transform:scaleY(1);transform-origin:bottom;pointer-events:all}
body.is-leaving .curtain-strip:nth-child(1){transition-delay:0s}
body.is-leaving .curtain-strip:nth-child(2){transition-delay:.06s}
body.is-leaving .curtain-strip:nth-child(3){transition-delay:.12s}
body.is-leaving .curtain-strip:nth-child(4){transition-delay:.18s}
body.is-entering .curtain-strip{transform:scaleY(1);transform-origin:top;transition:none}
body.page-in .curtain-strip{transform:scaleY(0);transform-origin:top;transition:transform .55s var(--ease-out)}
body.page-in .curtain-strip:nth-child(1){transition-delay:.06s}
body.page-in .curtain-strip:nth-child(2){transition-delay:.12s}
body.page-in .curtain-strip:nth-child(3){transition-delay:.18s}
body.page-in .curtain-strip:nth-child(4){transition-delay:.24s}

/* ── SCROLL PROGRESS ─────────────────────────────────────────── */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:var(--red);
  z-index:calc(var(--z-nav)+1);
  transition:width .1s linear;
}

/* ── NAVIGATION ──────────────────────────────────────────────── */
.site-nav{
  position:fixed;top:0;left:0;right:0;z-index:var(--z-nav);
  padding:1.1rem 0;
  transition:background .4s,border-color .4s,padding .4s;
  border-bottom:1px solid transparent;
}
.site-nav.scrolled{
  background:rgba(12,12,12,0.95);
  border-bottom-color:rgba(217,58,42,0.3);
  backdrop-filter:blur(10px);
  padding:.7rem 0;
}
/* Light nav variant for white sections */
.site-nav.nav-light{
  background:rgba(244,242,238,0.95);
  border-bottom-color:rgba(217,58,42,0.2);
}
.nav-inner{
  width:min(90rem,92%);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
}
.nav-menu{display:flex;align-items:center;gap:2.5rem}
.nav-link{
  font-family:var(--font-label);
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);opacity:.6;
  position:relative;transition:opacity .3s,color .3s;
}
.site-nav.nav-light .nav-link{color:var(--black)}
.nav-link::after{
  content:'';position:absolute;bottom:-2px;left:0;
  width:0;height:2px;background:var(--red);
  transition:width .3s var(--ease-out);
}
.nav-link:hover,.nav-link.active{opacity:1}
.nav-link:hover::after,.nav-link.active::after{width:100%}
.nav-cta{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.5rem 1.25rem;
  background:var(--red);color:var(--white);
  transition:background .25s,transform .2s;
}
.nav-cta:hover{background:var(--red-dk);transform:translateY(-1px)}
.nav-toggle{
  display:none;flex-direction:column;gap:5px;width:28px;cursor:none;
  color:var(--white);
}
.nav-toggle span{
  display:block;height:2px;background:var(--white);
  transition:transform .3s,opacity .3s,width .3s;
}
.nav-toggle span:last-child{width:65%}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-7px) rotate(-45deg);width:100%}
@media(max-width:768px){
  .nav-menu{
    position:fixed;inset:0 0 0 30%;
    flex-direction:column;align-items:flex-start;justify-content:center;
    background:var(--black);padding:2rem;gap:2rem;
    transform:translateX(100%);transition:transform .5s var(--ease-out);
    border-left:3px solid var(--red);
  }
  .nav-menu.open{transform:translateX(0)}
  .nav-link{font-size:1.1rem;opacity:1;color:var(--white)!important}
  .nav-toggle{display:flex}
}

/* ── HERO BASE ───────────────────────────────────────────────── */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black);
  padding-bottom:5rem;
}
.hero-layers{position:absolute;inset:0;z-index:0}
.para-layer{position:absolute;inset:-20% 0;will-change:transform}
.para-layer img{
  width:100%;height:120%;object-fit:cover;
  filter:brightness(.45) contrast(1.1) saturate(.8);
}
/* Red accent gradient overlay */
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(12,12,12,.97) 15%, rgba(12,12,12,.4) 60%, transparent 100%),
    linear-gradient(to right, rgba(217,58,42,.12) 0%, transparent 60%);
}
/* Diagonal stripe texture on right half */
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--stripe-dk);
}
.hero-content{
  position:relative;z-index:2;
  width:min(90rem,92%);margin-inline:auto;
  padding-top:calc(var(--nav-h,80px) + 2rem);
}
/* Giant ghost number */
.hero-ghost-num{
  position:absolute;right:-2vw;bottom:-1rem;
  font-family:var(--font-display);font-weight:900;font-size:28vw;
  line-height:.85;text-transform:uppercase;
  color:rgba(244,242,238,.04);
  pointer-events:none;z-index:1;user-select:none;
}
.hero-title{
  margin-bottom:2rem;
  color:var(--white);
}
.hero-title em{
  font-style:normal;
  -webkit-text-stroke:1.5px var(--white);
  color:transparent;
  display:block;
}
.hero-label{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.25em;
  text-transform:uppercase;color:var(--yellow);
  margin-bottom:1.5rem;
}
.hero-label::before{
  content:'';width:6px;height:6px;background:var(--yellow);
  animation:blink 2s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.2}}
.hero-sub{
  max-width:30rem;color:rgba(244,242,238,.65);
  font-size:1rem;margin-bottom:2.5rem;font-weight:300;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero-scroll-cue{
  position:absolute;right:5%;bottom:2.5rem;
  z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-label);font-size:.58rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--muted-dk);
  animation:cue-bob 2.5s ease-in-out infinite;
  writing-mode:vertical-rl;
}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
.scroll-cue-line{width:1px;height:2.5rem;background:linear-gradient(to bottom,var(--red),transparent)}

/* Reveal animations */
.h-reveal-wrap{overflow:hidden}
.h-reveal{
  display:block;
  transform:translateY(110%);
  transition:transform .9s var(--ease-out);
  transition-delay:var(--hd,0s);
}
body.page-in .h-reveal{transform:translateY(0)}

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.65rem;
  font-family:var(--font-label);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  padding:.75rem 1.75rem;
  position:relative;
  transition:transform .2s var(--ease-bounce),background .25s,color .25s;
}
.btn:active{transform:translateY(1px)!important}
.btn-red{
  background:var(--red);color:var(--white);
  outline:2px solid var(--red);outline-offset:0;
  transition:outline-offset .25s,background .25s,transform .2s var(--ease-bounce);
}
.btn-red:hover{background:var(--red-dk);outline-offset:4px;transform:translateY(-2px)}
.btn-outline-w{
  background:transparent;color:var(--white);
  border:2px solid rgba(244,242,238,.4);
}
.btn-outline-w:hover{border-color:var(--white);transform:translateY(-2px)}
.btn-outline-b{
  background:transparent;color:var(--black);
  border:2px solid rgba(12,12,12,.3);
}
.btn-outline-b:hover{border-color:var(--black);background:var(--black);color:var(--white);transform:translateY(-2px)}
.btn-yellow{
  background:var(--yellow);color:var(--black);
  outline:2px solid var(--yellow);outline-offset:0;
}
.btn-yellow:hover{background:var(--yellow-dk);outline-offset:4px;transform:translateY(-2px)}
.btn-icon{width:1em;height:1em;flex-shrink:0}

/* ── SCROLL REVEAL ───────────────────────────────────────────── */
[data-reveal]{
  opacity:0;transform:translateY(2rem);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:calc(var(--d,0)*100ms);
}
[data-reveal="left"]{transform:translateX(-3rem)}
[data-reveal="right"]{transform:translateX(3rem)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="clip"]{
  clip-path:inset(0 100% 0 0);
  transform:none;opacity:1;
  transition:clip-path .9s var(--ease-out);
  transition-delay:calc(var(--d,0)*100ms);
}
[data-reveal="clip"].in-view{clip-path:inset(0 0% 0 0)}
[data-reveal].in-view{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}}

/* ── MARQUEE ─────────────────────────────────────────────────── */
.marquee{
  overflow:hidden;border-top:1px solid rgba(217,58,42,.3);border-bottom:1px solid rgba(217,58,42,.3);
  padding:.75rem 0;background:var(--black-3);
}
.marquee-inner{
  display:flex;gap:2.5rem;align-items:center;white-space:nowrap;
  animation:marquee-scroll var(--dur,40s) linear infinite;
  font-family:var(--font-display);font-size:1rem;font-weight:700;
  letter-spacing:.15em;color:rgba(244,242,238,.5);text-transform:uppercase;
}
.marquee:hover .marquee-inner{animation-play-state:paused}
.marquee-inner .dot{color:var(--red);font-size:.6rem}
@keyframes marquee-scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

/* ── FOOTER ──────────────────────────────────────────────────── */
.site-footer{
  background:var(--black);
  border-top:3px solid var(--red);
}
.footer-main{padding:5rem 0 3rem}
.footer-grid{
  display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:3rem;
}
@media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:2rem}}
@media(max-width:500px){.footer-grid{grid-template-columns:1fr}}
.footer-brand p{color:rgba(244,242,238,.65);font-size:.88rem;margin-top:.75rem;line-height:1.6}
.footer-col h4{
  font-family:var(--font-display);font-weight:900;font-size:1.1rem;
  letter-spacing:.06em;text-transform:uppercase;
  color:var(--white);margin-bottom:1.2rem;
  padding-bottom:.5rem;border-bottom:2px solid var(--red);display:inline-block;
}
.footer-col ul{display:flex;flex-direction:column;gap:.65rem;margin-top:.25rem}
.footer-col li,.footer-col a{
  font-family:var(--font-label);font-size:.68rem;letter-spacing:.1em;
  color:rgba(244,242,238,.7);transition:color .3s;text-transform:uppercase;
}
.footer-col a:hover{color:var(--yellow)}
.footer-bottom{
  padding:1.25rem 0;border-top:1px solid rgba(244,242,238,.08);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;
}
.footer-bottom p{font-family:var(--font-label);font-size:.62rem;letter-spacing:.15em;color:rgba(244,242,238,.55)}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-family:var(--font-label);font-size:.62rem;letter-spacing:.1em;color:rgba(244,242,238,.55);transition:color .3s}
.footer-links a:hover{color:var(--red)}

/* ── BACK TO TOP ─────────────────────────────────────────────── */
.back-top{
  position:fixed;bottom:2rem;right:2rem;z-index:50;
  width:44px;height:44px;
  background:var(--red);color:var(--white);
  font-family:var(--font-display);font-size:1.1rem;font-weight:900;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;cursor:none;
  transition:opacity .3s,transform .3s;
}
.back-top.visible{opacity:1;pointer-events:auto}
.back-top:hover{transform:translateY(-3px)}

/* ── CTA BAND ────────────────────────────────────────────────── */
.cta-band{position:relative;overflow:hidden;padding:8rem 0;background:var(--black)}
.cta-band::before{content:'';position:absolute;inset:0;background:var(--stripe-dk);pointer-events:none}
.cta-band-bg{position:absolute;inset:0;z-index:0}
.cta-band-bg div{position:absolute;inset:-20% 0}
.cta-band-bg img{width:100%;height:120%;object-fit:cover;filter:brightness(.25) contrast(1.2) saturate(.5)}
.cta-band-overlay{position:absolute;inset:0;background:linear-gradient(135deg,rgba(217,58,42,.3),rgba(12,12,12,.85))}
.cta-band-content{position:relative;z-index:1;text-align:center}
.cta-band-content h2{color:var(--white);margin-bottom:1rem}
.cta-band-content p{color:rgba(244,242,238,.65);margin-bottom:2.5rem;font-size:1rem}
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* ── SPLIT STICKY ────────────────────────────────────────────── */
.split-sticky{display:grid;grid-template-columns:1fr 1fr;min-height:80vh}
.split-left{position:sticky;top:0;height:100svh;overflow:hidden}
.split-left img{width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(.9)}
.split-right{padding:5rem clamp(2rem,5vw,5rem)}
@media(max-width:768px){
  .split-sticky{grid-template-columns:1fr}
  .split-left{position:relative;height:60vw}
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — mobile-first corrections
   ══════════════════════════════════════════════════════════════ */

/* Évite tout débordement horizontal */
html,body{ overflow-x:hidden }

/* ── TABLET ≤1024px ─────────────────────────────────────────── */
@media(max-width:1024px){
  .hero-ghost-num{ font-size:22vw; right:-4vw }
  .why-content::before{ font-size:14rem; right:0 }
}

/* ── MOBILE ≤768px ──────────────────────────────────────────── */
@media(max-width:768px){
  /* Typographie */
  h1{ font-size:clamp(2.2rem,9vw,3.5rem) }
  h2{ font-size:clamp(1.6rem,7vw,2.8rem) }
  h3{ font-size:clamp(1.1rem,5vw,1.6rem) }

  /* Ghost numbers : masqués sur mobile (évite overflow) */
  .hero-ghost-num,
  .why-content::before { display:none }

  /* Hero — hauteur réduite, contenu centré-bas */
  .hero{
    min-height:85svh;
    align-items:flex-start;
    padding-bottom:3rem;
  }
  .hero-content{
    padding-top:calc(64px + 1.5rem);
    padding-bottom:0;
  }
  .hero-label{ font-size:.58rem }
  .hero-actions{ flex-direction:column; align-items:flex-start; margin-top:1.5rem }
  .hero-actions .btn{ width:100%; justify-content:center }
  .hero-scroll-cue{ right:1rem; bottom:1.5rem }

  /* Navigation mobile — menu visible au-dessus de tout */
  .nav-menu{
    z-index:calc(var(--z-nav) + 10)!important;
    background:rgba(12,12,12,0.98)!important;
  }
  .nav-inner{ padding:0 1rem }
  .nav-toggle{ cursor:pointer } /* fallback touch */

  /* Marquee */
  .marquee-inner{ font-size:.85rem }

  /* Section padding réduit */
  .section{ padding:clamp(3rem,8vw,5rem) 0 }

  /* Boutons pleine largeur sur mobile */
  .cta-actions{ flex-direction:column; align-items:center }
  .cta-actions .btn{ width:min(300px,90%); justify-content:center }

  /* Footer padding */
  .footer-main{ padding:3rem 0 2rem }
  .footer-bottom{ flex-direction:column; text-align:center; gap:.75rem }
  .footer-links{ justify-content:center }
  .footer-col h4{ font-size:1rem }

  /* Marquee — ralentir légèrement */
  .marquee-inner{ animation-duration:50s!important }
}