/* ==========================================================================
   66 Centimes — style.css
   ========================================================================== */

:root{
  /* 66 Centimes brand kit */
  --dark-text: #040B1C;
  --dark-blue: #213159;
  --blue: #185E90;
  --blue-gray: #9CB1C0;
  --blue-gray-light: #C1D2DE;
  /* darker, same-hue step of --blue-gray: text use needs 4.5:1 on light
     backgrounds, which #9CB1C0 itself only reaches ~2.1:1 (measured) */
  --blue-gray-deep: #536F83;

  --ink: var(--dark-text);
  --ink-soft: var(--dark-blue);
  --navy: var(--dark-blue);
  --navy-2: var(--blue);
  --bg: #F6F8FA;
  --bg-alt: #EBF1F5;
  --paper: #ffffff;
  --muted: var(--dark-blue);
  --muted-2: var(--blue-gray-deep);
  --line: rgba(4,11,28,0.10);
  --line-strong: rgba(4,11,28,0.18);
  --accent: var(--blue);
  --accent-2: var(--blue-gray);
  --accent-soft: #E9EFF4;
  --radius: 18px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --ease: cubic-bezier(.16,.8,.24,1);
  --dur: .8s;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

*{box-sizing:border-box;}
html{scroll-padding-top:90px;overflow-x:hidden;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
button{font-family:inherit;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.wrap{padding:0 20px;}}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.eyebrow::before{
  content:"";
  width:16px;height:1px;
  background:var(--line-strong);
  display:inline-block;
  flex:none;
}
.eyebrow .idx{
  color:var(--blue-gray-deep);
  font-weight:500;
}
.eyebrow .idx::after{content:"/";margin-inline-start:8px;color:var(--line-strong);}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0;
  color:var(--navy);
  text-wrap:balance;
}

h2.section-title{
  font-size:clamp(2rem, 4vw, 3.1rem);
  font-weight:800;
  letter-spacing:-.03em;
}

p{margin:0;}
.lead{font-size:1.15rem;color:var(--muted);line-height:1.65;}

.section{
  padding:150px 0;
  position:relative;
  scroll-margin-top:90px;
}
.hero{scroll-margin-top:0;}
@media (max-width:900px){.section{padding:84px 0;}}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:40px;
  margin-bottom:64px;
}
@media (max-width:760px){
  .section-head{flex-direction:column;align-items:flex-start;gap:20px;}
}
.section-head .head-note{
  max-width:340px;
  color:var(--muted);
  font-size:.98rem;
  padding-bottom:6px;
}

.btn{
  --mx:0px; --my:0px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:15px 26px;
  border-radius:100px;
  font-size:.92rem;
  font-weight:600;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--ink);
  cursor:pointer;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .12s linear;
  transform:translate(var(--mx),var(--my));
  white-space:nowrap;
}
.btn:hover{border-color:var(--navy);}
.btn:active{transform:translate(var(--mx),var(--my)) scale(.96);}
.btn svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.btn:hover svg{transform:translate(3px,-3px);}
.btn-primary{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}
.btn-primary:hover{background:var(--accent);border-color:var(--accent);}
.btn-ghost-light{border-color:rgba(255,255,255,.28);color:#fff;}
.btn-ghost-light:hover{border-color:#fff;background:rgba(255,255,255,.08);}

/* ---------------- progress bar ---------------- */
.scroll-progress{
  position:fixed;top:0;left:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  width:0%;
  z-index:1200;
  transition:width .08s linear;
}

/* ---------------- nav ---------------- */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:1000;
  padding:22px 0;
  border-bottom:1px solid var(--line);
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;}
.nav.scrolled{
  padding:14px 0;
  background:rgba(246,248,250,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%);
}
.brand{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);
  font-size:1.18rem;
  font-weight:800;
  color:var(--navy);
  letter-spacing:-.02em;
}
.brand .mark{
  width:24px;height:auto;
  flex:none;
}
.nav-links{display:flex;gap:2px;align-items:center;}
.nav-links a{
  position:relative;
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-soft);
  padding:9px 16px;
  border-radius:100px;
  transition:color .3s, background .3s;
}
.nav-links a:hover{background:rgba(10,20,32,.05);}
.nav-links a.active{color:var(--accent);}
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover{color:#fff;}
.nav-links a.btn-primary{background:var(--navy);}
.nav-links a.btn-primary:hover{background:var(--accent);}
.nav-cta{margin-inline-start:14px;}
.nav-toggle{
  display:none;
  width:42px;height:42px;
  border-radius:50%;
  border:1px solid var(--line-strong);
  background:none;
  align-items:center;justify-content:center;
  cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:"";display:block;width:16px;height:1.4px;background:var(--ink);
  position:relative;transition:transform .3s, opacity .3s, background-color .3s;
}
.nav-toggle span::before{position:absolute;top:-5px;transition:transform .3s, top .3s;}
.nav-toggle span::after{position:absolute;top:5px;transition:transform .3s, top .3s;}
/* Hamburger -> close morph, hooked directly to the aria-expanded state the
   JS already sets — no separate class needed to track open/closed. */
.nav-toggle[aria-expanded="true"] span{background:transparent;}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg);}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg);}

/* Body scroll lock: shared by the mobile nav panel and the lightbox, so it
   can't live inside the ≤900px media query below (the lightbox needs it at
   every width). */
body.menu-open{overflow:hidden;}

@media (max-width:900px){
  .nav-links{
    position:fixed;inset:0 0 auto auto;
    top:0;right:0;
    height:100vh;width:min(78vw,340px);
    background:var(--paper);
    flex-direction:column;
    align-items:flex-start;
    padding:110px 32px 40px;
    gap:6px;
    transform:translateX(100%);
    /* visibility flips to hidden only once the slide-out finishes, so the
       panel stays reachable (and visible) for the whole closing animation —
       but never sits off-screen while still in the keyboard tab order. */
    visibility:hidden;
    transition:transform .5s var(--ease), visibility 0s linear .5s;
    box-shadow:-30px 0 60px rgba(0,0,0,.08);
  }
  .nav-links.open{
    transform:translateX(0);
    visibility:visible;
    transition:transform .5s var(--ease), visibility 0s linear 0s;
  }
  .nav-links a{font-size:1.05rem;width:100%;padding:12px 14px;}
  .nav-cta{margin-inline-start:0;margin-top:12px;}
  .nav-toggle{display:flex;z-index:1001;}
}

/* ---------------- hero ---------------- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding-top:104px;
  padding-bottom:32px;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 15% -10%, #EAF0F5 0%, transparent 60%),
    var(--bg);
}
.hero-blobs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
/* Soft edges come from the gradient's own transparent falloff, not filter:blur —
   an animated blur filter on a large surface is expensive to composite and can
   corrupt GPU tiles while scrolling on some devices. Transform-only motion here. */
.blob{
  position:absolute;border-radius:50%;
  opacity:.55;
  animation:drift 26s ease-in-out infinite;
  animation-play-state:paused;
  will-change:transform;
}
.hero.in-view .blob{animation-play-state:running;}
.blob-a{width:640px;height:640px;background:radial-gradient(circle at 30% 30%, var(--blue-gray-light) 0%, transparent 60%);top:-200px;right:-200px;animation-duration:30s;}
.blob-b{width:520px;height:520px;background:radial-gradient(circle at 60% 40%, #DCE6ED 0%, transparent 60%);bottom:-220px;left:2%;animation-duration:34s;animation-delay:-8s;}
.blob-c{width:380px;height:380px;background:radial-gradient(circle at 50% 50%, var(--blue-gray) 0%, transparent 60%);top:25%;right:18%;animation-duration:22s;animation-delay:-4s;opacity:.28;}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);}
  33%{transform:translate(30px,-40px) scale(1.06);}
  66%{transform:translate(-25px,25px) scale(.96);}
}

.hero-grid-lines{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;
  background-image:
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: calc((var(--maxw) - 64px) / 4) 100%;
  background-position:center top;
  mask-image:linear-gradient(to bottom, transparent, black 20%, black 70%, transparent);
}

.hero .wrap{position:relative;z-index:2;width:100%;}

.hero-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px 40px;margin-bottom:36px;}
.hero-photo-credit{max-width:220px;font-size:.78rem;color:var(--muted-2);text-align:end;line-height:1.5;padding-top:8px;}
@media (max-width:480px){
  .hero-photo-credit{text-align:start;max-width:none;}
}

.hero h1{
  font-size:clamp(3rem, 8vw, 6.8rem);
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--navy);
}
.hero h1 .line{display:block;overflow:hidden;}
.has-js .hero h1 .line span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);}
.hero.loaded h1 .line span{transform:translateY(0);}
.hero h1 .line:nth-child(1) span{transition-delay:.05s;}
.hero h1 .line:nth-child(2) span{transition-delay:.16s;}

.hero-sub{
  margin-top:26px;
  max-width:560px;
  font-size:1.2rem;
  color:var(--muted);
}
html.has-js .hero-sub{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .9s var(--ease) .5s, transform .9s var(--ease) .5s;
}
.hero.loaded .hero-sub{opacity:1;transform:translateY(0);}

.hero-actions{
  margin-top:40px;
  display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}
html.has-js .hero-actions{
  opacity:0;transform:translateY(16px);
  transition:opacity .9s var(--ease) .65s, transform .9s var(--ease) .65s;
}
.hero.loaded .hero-actions{opacity:1;transform:translateY(0);}

.hero-stats{
  margin-top:60px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  padding-top:28px;
  gap:24px;
}
@media (max-width:900px){.hero-stats{grid-template-columns:repeat(2,1fr);row-gap:32px;}}
@media (max-width:700px){.hero-stats{grid-template-columns:1fr;gap:28px;}}
.stat .num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.1rem,4vw,3rem);
  color:var(--navy);
  font-weight:700;
  letter-spacing:-.02em;
}
.stat .num::after{content:attr(data-suffix);}
.stat .label{margin-top:6px;font-size:.86rem;color:var(--muted);max-width:220px;}

.scroll-cue{
  /* Fixed to the viewport, not to the hero's content height: on shorter
     browser windows the hero can grow taller than 100vh, which used to push
     this past the stats row when it was anchored to the hero's own bottom. */
  position:fixed;left:50%;bottom:28px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);
  z-index:500;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
}
.hero.in-view.loaded .scroll-cue{opacity:1;}
@media (max-height:1050px){
  /* Not enough vertical room on shorter browser windows for this purely
     decorative hint to avoid sitting on top of the stats row. */
  .scroll-cue{display:none;}
}
.scroll-cue .stick{width:1px;height:34px;background:linear-gradient(var(--muted-2),transparent);overflow:hidden;position:relative;}
.scroll-cue .stick::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:var(--accent);animation:scrollcue 2.4s ease-in-out infinite;animation-play-state:paused;}
.hero.in-view .scroll-cue .stick::after{animation-play-state:running;}
@keyframes scrollcue{
  0%{transform:translateY(-100%);opacity:0;}
  15%{opacity:1;}
  75%{opacity:1;}
  100%{transform:translateY(100%);opacity:0;}
}

/* ---------------- reveal utility ----------------
   Hidden only once JS confirms it can reveal them (html.has-js).
   With JS disabled/blocked, content stays fully visible — no broken state. */
html.has-js .reveal{
  opacity:0;
  transform:translateY(32px) scale(.97);
  transition:opacity .7s var(--ease), transform .7s var(--ease);
}
html.has-js .reveal.in{opacity:1;transform:translateY(0) scale(1);}
.reveal-group .reveal:nth-child(1){transition-delay:.02s;}
.reveal-group .reveal:nth-child(2){transition-delay:.10s;}
.reveal-group .reveal:nth-child(3){transition-delay:.18s;}
.reveal-group .reveal:nth-child(4){transition-delay:.26s;}
.reveal-group .reveal:nth-child(5){transition-delay:.34s;}
.reveal-group .reveal:nth-child(6){transition-delay:.42s;}

/* ---------------- histoire ---------------- */
.histoire{background:var(--paper);}
.histoire-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:80px;
  align-items:start;
}
@media (max-width:900px){.histoire-grid{grid-template-columns:1fr;gap:40px;}}
.histoire-figure{position:sticky;top:130px;}
.histoire-figure .quote{
  font-family:var(--font-display);
  font-size:1.5rem;
  color:var(--navy);
  line-height:1.35;
  font-weight:500;
}
.histoire-figure .who{margin-top:22px;font-size:.85rem;color:var(--muted);}
.histoire-figure .who b{color:var(--ink);}
.histoire-figure .who a{text-decoration:underline;text-decoration-color:rgba(33,49,89,.3);text-underline-offset:2px;transition:text-decoration-color .3s;}
.histoire-figure .who a:hover{text-decoration-color:var(--accent);}
@media (max-width:900px){.histoire-figure{position:static;}}

.histoire-body p{
  color:var(--muted);
  font-size:1.06rem;
  margin-bottom:22px;
}
.histoire-body p:first-child{
  font-size:1.2rem;
  color:var(--ink-soft);
}
.histoire-more{
  max-height:0;
  overflow:hidden;
  transition:max-height .7s var(--ease);
}
.histoire-more.open{max-height:1400px;}
.histoire-toggle{
  margin-top:6px;
  display:inline-flex;align-items:center;gap:8px;
  color:var(--accent);font-weight:700;font-size:.9rem;
  cursor:pointer;background:none;border:none;padding:0;
}
.histoire-toggle svg{width:12px;height:12px;transition:transform .4s var(--ease);}
.histoire-toggle.open svg{transform:rotate(180deg);}

/* ---------------- marquee band ---------------- */
.band{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
  background:var(--bg-alt);
  overflow:hidden;
}
.marquee{display:flex;width:max-content;animation:marquee 34s linear infinite;animation-play-state:paused;}
.band.in-view .marquee{animation-play-state:running;}
.marquee:hover{animation-play-state:paused;}
.marquee span{
  font-family:var(--font-display);
  font-size:1.3rem;
  color:var(--navy);
  padding:0 34px;
  white-space:nowrap;
  display:flex;align-items:center;gap:34px;
  opacity:.75;
  transition:opacity .3s, color .3s;
}
.marquee span:hover{opacity:1;color:var(--accent);}
.marquee span::after{content:"—";color:var(--line-strong);}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------------- projets ---------------- */
.projets{background:var(--bg);}
.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
@media (max-width:980px){.card-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.card-grid{grid-template-columns:1fr;}}

/* ---------------- portfolio identity accents ----------------
   Companies with a real logo on file use .has-logo / .logo-photo instead
   (below). These tints remain only for the two without one yet, plus the
   accompagnement avatars. */
.icon.brand-avolim, .a-avatar.brand-avolim{--accent-soft:#F5EEE6;--accent:#74562F;}
.icon.brand-soriano, .a-avatar.brand-soriano{--accent-soft:#F5E9E6;--accent:#743F2F;}
.icon.brand-teruel, .a-avatar.brand-teruel{--accent-soft:#F5EAE6;--accent:#74442F;}
.icon.brand-epif, .a-avatar.brand-epif{--accent-soft:#E6F5E9;--accent:#2F743D;}
.icon.brand-malvis, .a-avatar.brand-malvis{--accent-soft:#F5E8E6;--accent:#74382F;}
.icon.brand-millomaker, .a-avatar.brand-millomaker{--accent-soft:#EAE6F5;--accent:#442F74;}
.icon.brand-kcg, .a-avatar.brand-kcg{--accent-soft:#E6F5F0;--accent:#2F745D;}
.icon.brand-terzian, .a-avatar.brand-terzian{--accent-soft:#F5E6EF;--accent:#742F5B;}
.pcard{
  --rx:0deg;--ry:0deg;
  position:relative;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px 32px 32px;
  min-height:300px;
  display:flex;flex-direction:column;
  overflow:hidden;
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s var(--ease);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
}
.pcard:hover{border-color:var(--line-strong);box-shadow:0 30px 60px -30px rgba(10,30,60,.28);transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);}
/* .pcard is also .reveal, and html.has-js .reveal.in{transform:...} outranks
   the two rules above on specificity — without this, the tilt/hover-lift
   transform got silently replaced by the reveal's resting transform the
   moment a card finished revealing, i.e. for every card already on screen. */
html.has-js .pcard.reveal.in{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));}
html.has-js .pcard.reveal.in:hover{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);}
.pcard .icon{
  width:46px;height:46px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  flex:none;
}
.pcard .icon svg{width:22px;height:22px;}
/* Real company logos: a neutral white chip lets each logo show its own
   colors rather than fighting an invented tint. */
.pcard .icon.has-logo{background:#fff;border:1px solid var(--line);}
.pcard .icon.has-logo img,
.pcard .icon.has-logo svg{width:65%;height:65%;object-fit:contain;}
/* Icon sits beside the name instead of stacked above it. */
.pcard-head{display:flex;align-items:center;gap:14px;margin-bottom:28px;}
.pcard-head h3{margin-bottom:0;}
/* One plain line — origin (created / entered capital, with the year)
   plus sector — instead of the previous status-pill + chip cluster. */
.pcard .origin-line{
  font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2);
  margin-bottom:24px;
}
.tag{
  font-family:var(--font-mono);
  font-size:.68rem;letter-spacing:0;text-transform:uppercase;
  font-weight:600;color:var(--accent);
  background:var(--accent-soft);
  padding:5px 10px;border-radius:6px;
}
.pcard h3{font-size:1.32rem;font-weight:700;margin-bottom:10px;color:var(--navy);}
.pcard p{color:var(--muted);font-size:.94rem;line-height:1.75;margin-bottom:28px;}
.pcard .meta{
  margin-top:auto;padding-top:28px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);
  font-size:.76rem;color:var(--muted-2);
}
.pcard .go{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;color:var(--ink);font-size:.82rem;
}
.pcard .go svg{width:11px;height:11px;transition:transform .3s var(--ease);}
.pcard:hover .go svg{transform:translate(3px,-3px);}
/* Fidensio: our clearest exit success, so it leads the section as a
   full-width banner rather than a card among cards. */
/* Fidensio: our clearest exit story, but not a solid dark block — that
   kept reading as too heavy next to the plain light cards around it.
   A dashed border marks it as the one closed/completed case (echoing
   how "past" projects were once marked here) while the card itself
   stays the same light paper as every other one, just full width. */
.pcard.featured{
  grid-column:1/-1;
  min-height:0;
  background:var(--paper);
  border:1.5px dashed var(--line-strong);
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:32px;
  align-items:center;
  padding:36px 36px;
}
@media (max-width:860px){.pcard.featured{grid-template-columns:1fr;gap:24px;padding:30px 26px;}}
.closed-banner{
  grid-column:1/-1;
  display:flex;align-items:center;gap:10px;
  padding-bottom:22px;margin-bottom:4px;
  border-bottom:1px dashed var(--line-strong);
  font-size:.98rem;font-weight:700;color:var(--navy);
}
.closed-banner svg{width:22px;height:22px;color:var(--muted-2);flex:none;}
.success-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:860px){.success-stats{border-top:1px dashed var(--line-strong);padding-top:24px;}}
@media (max-width:480px){.success-stats{grid-template-columns:1fr;gap:14px;}}
.pcard.featured .success-stats .num{
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
  font-size:1.5rem;font-weight:700;color:var(--navy);letter-spacing:-.01em;
}
.pcard.featured .success-stats .label{margin-top:4px;font-size:.76rem;line-height:1.4;color:var(--muted-2);}

/* AVOLIM and Cave de Teruel: solid, active businesses that simply need
   less promotional real estate than the section's headline stories. */
.compact-row{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:26px;
}
@media (max-width:640px){.compact-row{grid-template-columns:1fr;}}
.pcard.compact{min-height:0;padding:30px 30px 28px;}
.pcard.compact .icon{width:38px;height:38px;}
.pcard.compact .icon svg{width:18px;height:18px;}
.pcard.compact .origin-line{margin-bottom:20px;}
.pcard.compact .pcard-head{margin-bottom:22px;}
.pcard.compact p{margin-bottom:22px;}
.pcard.compact h3{font-size:1.14rem;margin-bottom:0;}
.pcard.compact .meta{padding-top:22px;}

.projets-note{
  margin-top:26px;
  font-size:.85rem;
  color:var(--muted-2);
  display:flex;
  align-items:center;
  gap:10px;
}

/* ---------------- accompagnement ---------------- */
.accomp{background:var(--paper);}
.accomp-list{border-top:1px solid var(--line);}
.arow{
  display:grid;
  /* Fixed last track (not auto) so a long URL in one row can't shrink
     the identity/desc/tags columns of that row relative to the others —
     that mismatch was what made the rows look unaligned. */
  grid-template-columns:2fr 3fr 1.4fr 210px;
  gap:24px;
  align-items:center;
  padding:30px 0;
  border-bottom:1px solid var(--line);
  transition:background .35s;
}
.arow:hover{background:rgba(43,78,163,.03);}
@media (max-width:900px){
  .arow{grid-template-columns:1fr;gap:12px;padding:26px 4px;}
}
.a-identity{display:flex;align-items:center;gap:14px;}
.a-avatar{
  width:42px;height:42px;flex:none;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.01em;
  background:var(--accent-soft);color:var(--accent);
  transition:transform .35s var(--ease);
}
.arow:hover .a-avatar{transform:translateY(-2px) scale(1.06);}
.arow .a-name{
  font-family:var(--font-display);
  font-size:1.4rem;
  color:var(--navy);
}
/* Block, not inline-flex: a long name (Malvis Cooking) wraps to two
   lines in this narrow column, which pushed an inline tag to a stray
   position. A block caption underneath stays predictable at any length. */
.arow .a-name small{
  display:block;margin-top:4px;
  font-family:var(--font-mono);font-size:.7rem;color:var(--accent);font-weight:600;letter-spacing:0;text-transform:uppercase;
}
.arow .a-name a.frac-tag{
  display:block;margin-top:4px;
  font-family:var(--font-mono);font-size:.7rem;color:var(--accent);font-weight:600;letter-spacing:0;text-transform:uppercase;
  text-decoration:none;
}
.arow .a-name a.frac-tag:hover{text-decoration:underline;}
.arow .a-desc{color:var(--muted);font-size:.94rem;line-height:1.6;}
/* Plain label, not a pill — same quiet mono-text treatment as the
   .origin-line tag on the "Nos projets" cards, for one consistent
   language across both portfolio lists. */
.arow .a-tags{font-family:var(--font-mono);font-size:.74rem;color:var(--muted-2);}
/* Same quiet mono-text line as .a-tags itself, not a filled chip —
   one plain fact under the other instead of a colored badge. */
.arow .a-stat{display:block;margin-top:4px;}
.arow .a-link{
  justify-self:end;
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:.84rem;
  padding:10px 18px;border-radius:100px;border:1px solid var(--line-strong);
  transition:background .3s, color .3s, border-color .3s, transform .12s linear;
}
.arow .a-link:hover{background:var(--navy);color:#fff;border-color:var(--navy);}
.arow .a-link:active{transform:scale(.96);}
@media (max-width:900px){.arow .a-link{justify-self:start;}}
.a-social{display:flex;gap:14px;margin-top:4px;flex-wrap:wrap;}
.a-social span{font-size:.76rem;color:var(--muted-2);display:inline-flex;align-items:center;gap:5px;}
.a-social svg{width:13px;height:13px;}

/* Just the text — a short paragraph for context, not a diagram. Capped
   measure keeps it readable now that it isn't paired with a second
   column. */
/* Full-width band, same eyebrow label style as every other section
   intro — a floating chip-plus-diagram treatment read as a bolted-on
   afterthought once it was the only thing in the box. */
.accomp-highlight{
  scroll-margin-top:90px;
  margin-top:70px;
  background:var(--bg-alt);
  border-radius:var(--radius);
  padding:40px 48px;
}
@media (max-width:900px){.accomp-highlight{padding:32px 24px;}}
.accomp-highlight .eyebrow{margin-bottom:18px;}
.accomp-highlight h3{font-size:1.5rem;font-weight:700;margin-bottom:16px;}
.accomp-highlight p{color:var(--muted);line-height:1.7;}
.accomp-highlight p a{color:var(--accent);font-weight:700;text-decoration:underline;text-decoration-color:rgba(33,49,89,.3);text-underline-offset:2px;transition:text-decoration-color .3s;}
.accomp-highlight p a:hover{text-decoration-color:var(--accent);}

/* ---------------- actifs ---------------- */
/* A light section like every other one — just a step deeper than --bg,
   the same restrained tint the Fractional callout and the histoire
   portrait already use elsewhere. The villa card below stays dark and
   self-contained (its own explicit colors), the same trick already
   used for Fidensio: one deliberate dark card inside a light section,
   not the whole section going dark. */
.actifs{background:var(--bg-alt);position:relative;overflow:hidden;}
.actifs .wrap{position:relative;z-index:2;}

.cat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  margin-bottom:90px;
}
@media (max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr);}}
.cat{
  background:var(--paper);
  padding:34px 26px;
  transition:background .4s;
}
.cat:hover{background:var(--bg-alt);}
.cat .icon{width:34px;height:34px;color:var(--accent);margin-bottom:20px;transition:transform .35s var(--ease);}
.cat:hover .icon{transform:translateY(-3px) scale(1.1);}
.cat h3{color:var(--navy);font-size:1.05rem;font-weight:600;font-family:var(--font-body);margin-bottom:8px;}
.cat p{color:var(--muted);font-size:.84rem;line-height:1.55;}

/* villa feature */
.villa{
  position:relative;
  z-index:1;
  border-radius:24px;
  overflow:hidden;
  background:#0c141f;
  border:1px solid rgba(255,255,255,.12);
}
.villa-top{
  display:grid;grid-template-columns:1.1fr .9fr;
  gap:0;
}
@media (max-width:900px){.villa-top{grid-template-columns:1fr;}}
.villa-hero-img{
  display:block;width:100%;min-height:420px;
  position:relative;overflow:hidden;
  border:none;margin:0;padding:0;
  background:none;font:inherit;text-align:inherit;
  cursor:pointer;
}
.villa-hero-img img{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
  transform:scale(1.15);
  transition:transform 1.8s var(--ease);
}
/* Settles once when the card scrolls into view (.villa already gets
   .reveal's .in toggle), then a hover continues the same zoom further —
   a slow Ken Burns start plus the existing interactive follow-through. */
.villa.in .villa-hero-img img{transform:scale(1.08);}
.villa:hover .villa-hero-img img{transform:scale(1);}
.villa-hero-img .villa-loc{
  position:absolute;left:24px;bottom:24px;
  display:flex;align-items:center;gap:8px;
  background:rgba(10,20,32,.55);backdrop-filter:blur(8px);
  color:#fff;font-family:var(--font-mono);font-size:.76rem;font-weight:500;
  padding:9px 14px;border-radius:100px;
  border:1px solid rgba(255,255,255,.18);
}
.villa-hero-img .villa-loc svg{width:13px;height:13px;color:var(--accent-2);}

.villa-info{padding:46px 44px;display:flex;flex-direction:column;}
.villa-info .eyebrow{color:var(--accent-2);margin-bottom:16px;}
.villa-info h3{
  font-size:clamp(1.7rem,3vw,2.3rem);
  color:#fff;font-weight:700;margin-bottom:16px;
}
.villa-info p{color:rgba(255,255,255,.66);line-height:1.75;font-size:.98rem;}
.villa-info p + p{margin-top:14px;}
.villa-specs{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:16px;margin:28px 0;
  padding:22px 0;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);
}
.villa-specs .spec b{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:1.5rem;color:#fff;font-weight:700;letter-spacing:-.01em;}
.villa-specs .spec span{font-size:.74rem;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;}
@media (max-width:400px){
  .villa-specs{grid-template-columns:repeat(2,1fr);row-gap:20px;}
  .villa-specs .spec span{white-space:normal;}
}
.villa-credit{margin-top:auto;padding-top:22px;font-size:.78rem;color:rgba(255,255,255,.55);line-height:1.6;}
.villa-credit b{color:rgba(255,255,255,.75);font-weight:600;}

.villa-gallery{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:2px;
  background:rgba(255,255,255,.12);
}
.villa-gallery button{
  border:none;padding:0;margin:0;cursor:pointer;
  aspect-ratio:1/1;overflow:hidden;position:relative;background:#0c141f;
}
.villa-gallery img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease), filter .4s;
  filter:saturate(.92);
}
.villa-gallery button:hover img{transform:scale(1.08);filter:saturate(1.1);}
.villa-gallery button::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.35), transparent 40%);
  opacity:0;transition:opacity .3s;
}
.villa-gallery button:hover::after{opacity:1;}
@media (max-width:760px){.villa-gallery{grid-template-columns:repeat(3,1fr);}}

/* lightbox */
.lightbox{
  position:fixed;inset:0;z-index:2000;
  background:rgba(6,10,16,.94);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity .4s var(--ease);
  padding:40px;
  overscroll-behavior:contain;
}
.lightbox.open{opacity:1;pointer-events:auto;}
.lightbox img{max-width:min(1200px,90vw);max-height:82vh;object-fit:contain;border-radius:6px;}
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:#fff;border-radius:50%;
  width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .3s, transform .12s linear;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{background:rgba(255,255,255,.18);}
.lightbox-close:active, .lightbox-prev:active, .lightbox-next:active{transform:scale(.96);}
.lightbox-prev:active{transform:translateY(-50%) scale(.96);}
.lightbox-next:active{transform:translateY(-50%) scale(.96);}
.lightbox-close{top:28px;right:28px;}
.lightbox-prev{left:28px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:28px;top:50%;transform:translateY(-50%);}
.lightbox-caption{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.6);font-size:.82rem;}
@media (max-width:640px){
  .lightbox-prev,.lightbox-next{width:38px;height:38px;}
  .lightbox-close{width:38px;height:38px;top:16px;right:16px;}
}

/* ---------------- portfolio row (immobilier autres) ---------------- */
.other-assets{
  margin-top:36px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
@media (max-width:900px){.other-assets{grid-template-columns:1fr;}}
.asset-card{
  border:1px solid var(--line);
  border-radius:16px;padding:26px;
  background:var(--paper);
}
/* .reveal's own transition (opacity+transform only) would otherwise win
   on specificity and silently drop the border-color/box-shadow hover
   transition below — matching its html.has-js prefix restores them. */
html.has-js .asset-card{transition:transform .4s var(--ease), border-color .3s, box-shadow .4s var(--ease), opacity .9s var(--ease);}
.asset-card:hover{
  transform:translateY(-4px);
  border-color:var(--line-strong);
  box-shadow:0 24px 48px -28px rgba(10,30,60,.24);
}
.asset-card .icon{width:28px;height:28px;color:var(--accent);margin-bottom:16px;transition:transform .35s var(--ease);}
.asset-card:hover .icon{transform:translateY(-2px) scale(1.08);}
.asset-card h3{color:var(--navy);font-family:var(--font-body);font-weight:600;font-size:1rem;margin-bottom:8px;}
.asset-card p{color:var(--muted);font-size:.86rem;line-height:1.6;}

/* ---------------- collaboration ---------------- */
.collab{
  background:var(--bg);
  text-align:center;
}
.collab .wrap{max-width:820px;}
.collab h2{font-size:clamp(2.2rem,5vw,3.6rem);}
.collab .lead{margin:22px auto 40px;max-width:560px;}
.collab-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;}

/* ---------------- footer ---------------- */
footer{
  background:var(--navy);
  color:rgba(255,255,255,.7);
  padding:70px 0 30px;
}
.footer-top{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;
  padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.12);
}
@media (max-width:800px){.footer-top{grid-template-columns:1fr 1fr;}}
.footer-brand .brand{color:#fff;}
.footer-brand p{margin-top:16px;font-size:.88rem;color:rgba(255,255,255,.6);max-width:280px;line-height:1.6;}
.footer-col h3{color:#fff;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;font-weight:700;}
.footer-col a, .footer-col p{display:block;font-size:.88rem;color:rgba(255,255,255,.6);margin-bottom:10px;transition:color .3s;}
.footer-col a:hover{color:#fff;}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;
  padding-top:26px;font-size:.78rem;color:rgba(255,255,255,.6);flex-wrap:wrap;gap:12px;
}
.lang-switch{
  display:flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.02em;
}
.lang-switch a{color:rgba(255,255,255,.55);transition:color .3s;}
.lang-switch a:hover{color:#fff;}
.lang-switch .lang-current{color:#fff;font-weight:700;pointer-events:none;}
.lang-switch .lang-sep{color:rgba(255,255,255,.28);}
.footer-legal-note{
  font-size:.72rem;color:rgba(255,255,255,.6);margin-top:26px;line-height:1.6;
  border-top:1px dashed rgba(255,255,255,.15);padding-top:20px;
}

/* ---------------- skip link ---------------- */
.skip-link{
  position:fixed;
  top:-100%;
  left:12px;
  z-index:2100;
  background:var(--navy);
  color:#fff;
  font-weight:700;
  font-size:.9rem;
  padding:12px 20px;
  border-radius:10px;
  transition:top .25s var(--ease);
}
.skip-link:focus-visible{top:12px;}

/* ---------------- grain texture ---------------- */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;mix-blend-mode:overlay;}
.grain::before{
  content:"";position:absolute;inset:-100px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* misc */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
::selection{background:var(--navy);color:#fff;}

/* ---------------- Tally popup theming ----------------
   Tally's embed.js injects its own overlay/popup with generic gray
   chrome and 5px corners — this reskins that chrome (dim color, corner
   radius, shadow, entrance motion) to match the site's own card and
   overlay language. The form itself renders inside a cross-origin
   iframe, so its internal fields/typography stay Tally's — only the
   frame around it is ours to theme. .tally-overlay/.tally-popup are
   Tally's documented hook classes; the hashed CSS-module class on the
   inner wrapper isn't, so that one's addressed structurally instead
   (.tally-popup > div) rather than by name. !important guards against
   their own inline/CSS-module rules winning on source order. */
.tally-overlay{
  background:rgba(4,11,28,.6) !important;
  backdrop-filter:blur(6px) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  animation:tallyFadeIn .25s var(--ease);
}
.tally-popup{
  border-radius:20px !important;
  box-shadow:0 30px 70px -20px rgba(4,11,28,.4), 0 0 0 1px rgba(4,11,28,.06) !important;
  animation:tallyPopIn .35s var(--ease);
}
.tally-popup>div{border-radius:20px !important;overflow:hidden !important;}
.tally-popup iframe{border-radius:20px !important;}
@keyframes tallyFadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes tallyPopIn{
  from{opacity:0;transform:scale(.96) translateY(10px);}
  to{opacity:1;transform:none;}
}
@media (max-width:640px){
  .tally-popup, .tally-popup>div, .tally-popup iframe{border-radius:16px !important;}
}
@media (prefers-reduced-motion: reduce){
  .tally-overlay, .tally-popup{animation:none;}
}