@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@1,500&display=swap');
:root{--ink:#0b0b0b;--paper:#efeee9;--line:#c9c7c0;--muted:#6c6a65;--pad:clamp(22px,4vw,68px)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',Arial,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.topbar{position:fixed;z-index:50;top:0;left:0;right:0;height:92px;display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);mix-blend-mode:difference;color:#fff}.brand{display:flex;align-items:center;justify-content:flex-start;line-height:0;flex:0 0 auto}
.brand img{display:block;height:54px;width:auto;max-width:none;object-fit:contain;object-position:left center}nav{display:flex;gap:32px;font-size:13px}nav a,.mini-cta{position:relative}.mini-cta{font-size:13px;border-bottom:1px solid currentColor;padding-bottom:5px}.hero{min-height:100svh;position:relative;padding:140px var(--pad) 50px;display:flex;align-items:flex-end;overflow:hidden;background:#111;color:#fff}.hero-grid{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:12.5vw 12.5vw;mask-image:linear-gradient(to bottom,transparent,#000 35%,#000)}.hero-copy{position:relative;z-index:3;width:min(980px,78vw)}.eyebrow,.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:11px}.hero h1{font-size:clamp(64px,9.4vw,155px);line-height:.83;letter-spacing:-.07em;margin:26px 0 45px;font-weight:600}.hero h1 em,.manifesto h2 span,.exploded h2 em{font-family:'Playfair Display',serif;font-weight:500}.hero-bottom{display:flex;gap:50px;align-items:flex-end}.hero-bottom p{max-width:480px;font-size:18px;line-height:1.5;color:#c8c8c8}.circle-link{border:1px solid #777;width:110px;height:110px;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:12px;transition:.3s}.circle-link:hover{background:#fff;color:#111}.hero-object{position:absolute;right:-10vw;top:7vh;width:58vw;opacity:.78;mix-blend-mode:screen;transform:rotate(-8deg)}.hero-object img{filter:grayscale(1) contrast(1.2)}.scroll-index{position:absolute;right:var(--pad);bottom:35px;font-size:11px}.manifesto{padding:13vw var(--pad);border-bottom:1px solid var(--line)}.manifesto h2{font-size:clamp(48px,7.6vw,125px);line-height:.98;letter-spacing:-.055em;max-width:1350px;margin:40px 0 80px}.manifesto-meta{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.manifesto-meta p{margin:0;padding:18px 0;border-right:1px solid var(--line);font-size:13px}.pinned{display:grid;grid-template-columns:40% 60%;min-height:280vh;background:#dddcd6}.pin-copy{position:sticky;top:0;height:100vh;padding:140px var(--pad) 60px;display:flex;flex-direction:column;justify-content:center}.pin-copy h2,.section-head h2,.process h2{font-size:clamp(60px,7vw,120px);line-height:.9;letter-spacing:-.06em;margin:22px 0 40px}.pin-copy>p:last-child{max-width:450px;line-height:1.6;color:var(--muted)}.pin-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#111;color:#fff;display:flex;align-items:flex-end;padding:var(--pad)}.stage-object{position:absolute;width:95%;height:95%;object-fit:cover;inset:2.5%;opacity:.55;filter:grayscale(1) contrast(1.3)}.service-card{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);z-index:3;display:grid;grid-template-columns:70px 1fr 1fr;gap:30px;align-items:end;opacity:0;transform:translateY(60px);transition:.6s}.service-card.active{opacity:1;transform:none}.service-card span{font-size:12px}.service-card h3{font-size:clamp(42px,5vw,82px);margin:0;letter-spacing:-.05em}.service-card p{max-width:420px;color:#bbb;line-height:1.5}.exploded{min-height:120vh;padding:13vw var(--pad);display:grid;grid-template-columns:45% 55%;gap:5vw;align-items:center;background:#f7f6f2}.exploded-copy h2{font-size:clamp(66px,8vw,138px);line-height:.85;letter-spacing:-.06em;margin:30px 0}.exploded-copy>p:last-child{max-width:450px;line-height:1.6}.layers{perspective:1200px;position:relative;height:700px;display:grid;place-items:center}.layer{position:absolute;width:80%;height:110px;background:#111;color:#fff;border:1px solid #444;border-radius:18px;padding:0 30px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 25px 45px rgba(0,0,0,.12);transform:translateY(calc(var(--i,0)*48px)) rotateX(55deg) rotateZ(-5deg);transition:transform .8s}.layer:nth-child(1){--i:-2}.layer:nth-child(2){--i:-1}.layer:nth-child(3){--i:0}.layer:nth-child(4){--i:1}.layer:nth-child(5){--i:2}.layer b{font-size:12px;color:#777}.layer span{font-size:21px}.work{padding:12vw 0 0;background:#111;color:#fff}.section-head{padding:0 var(--pad) 70px}.horizontal-wrap{height:100vh;overflow:hidden}.horizontal-track{height:100%;display:flex;gap:24px;padding:0 var(--pad);width:max-content;align-items:center}.project{width:min(72vw,950px);flex:none}.project img{height:62vh;width:100%;object-fit:cover;filter:grayscale(1);border-radius:4px}.project div{display:grid;grid-template-columns:150px 1fr 1fr;align-items:end;padding-top:18px}.project span,.project p{font-size:12px;color:#999}.project h3{font-size:42px;margin:0}.numbers{padding:6vw var(--pad);background:#111;color:#fff}.numbers div{display:grid;grid-template-columns:35% 65%;align-items:center;border-top:1px solid #333;padding:26px 0}.numbers strong{font-size:clamp(68px,9vw,150px);letter-spacing:-.06em}.numbers span{font-size:15px;color:#aaa}.process{display:grid;grid-template-columns:48% 52%;min-height:100vh}.process-art{background:#1b1b1b;display:grid;place-items:center;overflow:hidden}.process-art img{width:110%;max-width:none;filter:grayscale(1);mix-blend-mode:screen}.process-copy{padding:10vw var(--pad)}.process ol{list-style:none;margin:60px 0 0;padding:0}.process li{display:grid;grid-template-columns:60px 1fr;border-top:1px solid var(--line);padding:24px 0}.process li span{font-size:12px}.process h3{font-size:28px;margin:0 0 8px}.process li p{margin:0;color:var(--muted)}.cta{min-height:100vh;background:#0b0b0b;color:white;padding:80px var(--pad) 35px;display:flex;flex-direction:column;justify-content:space-between}.cta-logo{display:block;width:auto;height:clamp(120px,15vw,230px);max-width:min(70vw,520px);object-fit:contain;object-position:left center;align-self:flex-start;margin:0}.cta>p{font-size:14px;color:#888}.cta>a{font-size:clamp(60px,10vw,170px);line-height:.9;letter-spacing:-.07em;border-bottom:1px solid #444;padding-bottom:35px;display:flex;justify-content:space-between}.cta>a span{font-family:Arial;font-weight:200}.cta footer{display:flex;justify-content:space-between;color:#777;font-size:11px;padding-top:25px}.cursor,.cursor-dot{position:fixed;pointer-events:none;z-index:1000;border-radius:50%;transform:translate(-50%,-50%)}.cursor{width:34px;height:34px;border:1px solid currentColor;transition:.12s}.cursor-dot{width:5px;height:5px;background:currentColor}
@media(max-width:900px){.topbar nav{display:none}.hero{padding-top:120px}.hero-copy{width:100%}.hero-object{width:100vw;right:-45vw;opacity:.45}.hero-bottom{flex-direction:column;align-items:flex-start}.manifesto-meta{grid-template-columns:1fr 1fr}.pinned{grid-template-columns:1fr;min-height:auto}.pin-copy{position:relative;height:auto;padding-top:100px}.pin-stage{position:relative;height:900px}.service-card{grid-template-columns:40px 1fr}.service-card p{grid-column:2}.exploded{grid-template-columns:1fr}.layers{height:520px}.project{width:88vw}.project div{grid-template-columns:1fr;gap:7px}.numbers div{grid-template-columns:1fr}.process{grid-template-columns:1fr}.process-art{min-height:60vh}.cta-logo{height:clamp(105px,28vw,165px);width:auto;max-width:76vw}.cta footer{flex-direction:column;gap:8px}.cursor,.cursor-dot{display:none}}

/* Portée Studio campaign imagery + scroll choreography */
.hero-object{right:-2vw;top:5vh;width:62vw;height:90vh;opacity:.9;mix-blend-mode:normal;transform:rotate(0)}
.hero-object::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#111 0%,transparent 32%,transparent 100%);pointer-events:none}
.hero-object img{width:100%;height:100%;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.08)}
.stage-visual{position:absolute;inset:0;overflow:hidden}
.stage-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(17,17,17,.05),rgba(17,17,17,.4) 58%,#111 100%);z-index:1}
.stage-object{width:100%;height:100%;inset:0;object-fit:cover;opacity:.82;filter:grayscale(1) contrast(1.12);transition:opacity .35s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.pinned{min-height:420vh}
.pin-stage{isolation:isolate}
.service-card{z-index:4}

.exploded{min-height:180vh;position:relative}
.exploded-copy{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center}
.layers{position:sticky;top:0;height:100vh;overflow:visible}
.exploded-core{position:absolute;inset:8% 6%;z-index:1;filter:drop-shadow(0 30px 40px rgba(0,0,0,.16));transform-style:preserve-3d}
.product-slice{position:absolute;left:8%;right:8%;height:18%;background-image:url('tourism-exploded.webp');background-size:100% 500%;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.4);border-radius:16px;box-shadow:0 24px 55px rgba(0,0,0,.16);will-change:transform,opacity;transition:transform .08s linear}
.slice-1{top:2%;background-position:center 0%}
.slice-2{top:22%;background-position:center 25%}
.slice-3{top:42%;background-position:center 50%}
.slice-4{top:62%;background-position:center 75%}
.slice-5{top:82%;background-position:center 100%}
.layer{z-index:3;width:84%;height:84px;background:rgba(10,10,10,.9);backdrop-filter:blur(12px);border-color:rgba(255,255,255,.14);border-radius:12px;opacity:0;pointer-events:none}

.work{position:relative;padding-top:12vw;min-height:480vh}
.section-head{position:relative;z-index:2}
.horizontal-wrap{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.horizontal-track{will-change:transform}
.project img{filter:grayscale(1) contrast(1.04)}
.process-art img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);mix-blend-mode:normal}
.cta{position:relative;overflow:hidden;background:#070707}
.cta::before{content:"";position:absolute;inset:0;background:url('cta-dark.webp') center/cover no-repeat;opacity:.72;filter:grayscale(1) contrast(1.08)}
.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.52))}
.cta>*{position:relative;z-index:2}

@media(max-width:900px){
 .hero-object{width:125vw;height:80vh;right:-62vw;top:12vh;opacity:.55}
 .pinned{min-height:auto}.exploded{min-height:auto}.exploded-copy{position:relative;height:auto}.layers{position:relative;height:650px}
 .exploded-core{inset:8% 0}.layer{width:94%}.work{min-height:auto}.horizontal-wrap{position:relative;height:auto;overflow-x:auto;padding-bottom:50px}.horizontal-track{transform:none!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.stage-object,.product-slice,.horizontal-track{transition:none!important}}

/* Tourism scene — refined editorial redesign */
.exploded{
  min-height:210vh;
  padding:0 var(--pad);
  grid-template-columns:minmax(360px,38%) minmax(0,62%);
  gap:clamp(28px,5vw,90px);
  background:#f3f1ec;
  border-top:1px solid rgba(11,11,11,.12);
  overflow:clip;
}
.exploded-copy{
  padding:70px 0;
  align-items:flex-start;
  z-index:5;
}
.exploded-copy::after{
  content:"PORTÉE / TOURISM SYSTEM";
  margin-top:52px;
  padding-top:16px;
  width:min(360px,100%);
  border-top:1px solid rgba(11,11,11,.22);
  color:#77736c;
  font-size:10px;
  letter-spacing:.16em;
}
.exploded-copy h2{
  font-size:clamp(58px,6.7vw,118px);
  line-height:.88;
  max-width:700px;
  margin:28px 0 38px;
}
.exploded-copy>p:last-of-type{
  max-width:420px;
  font-size:16px;
  color:#4f4d48;
}
.layers{
  top:0;
  height:100vh;
  min-height:720px;
  perspective:1800px;
  place-items:center;
}
.layers::before{
  content:none;
  display:none;
}
.layers::after{
  content:"EXPLODED BOOKING SYSTEM";
  position:absolute;
  right:2%;
  bottom:5.5%;
  font-size:9px;
  letter-spacing:.16em;
  color:#817d75;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
}
.exploded-core{
  inset:auto;
  width:min(610px,84%);
  aspect-ratio:4/5;
  z-index:2;
  filter:drop-shadow(0 28px 35px rgba(20,17,13,.14));
  transform-style:preserve-3d;
}
.product-slice{
  left:0;
  right:0;
  height:20%;
  border:0;
  border-radius:14px;
  box-shadow:0 18px 42px rgba(15,13,10,.12);
  overflow:hidden;
  background-size:100% 500%;
  outline:1px solid rgba(255,255,255,.42);
  outline-offset:-1px;
}
.slice-1{top:0}.slice-2{top:20%}.slice-3{top:40%}.slice-4{top:60%}.slice-5{top:80%}
.layer{
  z-index:4;
  width:clamp(190px,18vw,285px);
  height:54px;
  padding:0 17px;
  border-radius:999px;
  background:rgba(15,15,15,.86);
  color:#fff;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 14px 30px rgba(0,0,0,.16);
  backdrop-filter:blur(15px);
  justify-content:flex-start;
  gap:18px;
  opacity:0;
  pointer-events:none;
  transform:none;
}
.layer b{
  flex:0 0 auto;
  color:#aaa69f;
  font-size:9px;
  letter-spacing:.12em;
}
.layer span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:12px;
  letter-spacing:.01em;
}
.layer:nth-child(2){top:14%;right:-1%}
.layer:nth-child(3){top:31%;left:-2%}
.layer:nth-child(4){top:48%;right:-3%}
.layer:nth-child(5){top:65%;left:-1%}
.layer:nth-child(6){top:82%;right:0}

@media(max-width:1100px) and (min-width:901px){
  .exploded{grid-template-columns:42% 58%;gap:24px}
  .layer{width:210px}
  .exploded-core{width:82%}
}
@media(max-width:900px){
  .exploded{padding:56px var(--pad);grid-template-columns:1fr;gap:28px}
  .exploded-copy{padding:0;position:relative;height:auto}
  .exploded-copy::after{margin-top:30px}
  .layers{height:720px;min-height:0;position:relative}
 .layers::before{width:88%}
  .exploded-core{width:78%}
  .layer{width:190px;height:48px}
  .layer:nth-child(2),.layer:nth-child(4),.layer:nth-child(6){right:0}
  .layer:nth-child(3),.layer:nth-child(5){left:0}
}
@media(max-width:540px){
  .layers{height:610px}
  .exploded-core{width:83%}
  .layer{width:165px;padding:0 13px;gap:10px}
  .layer span{font-size:10px}
}

@media(max-width:700px){.brand img{height:46px;width:auto;max-width:none}.topbar{height:78px}}

/* Fix: remove the empty lead-in space before the tourism pinned scene */
.exploded{
  align-items:start;
}
.exploded-copy,
.layers{
  align-self:start;
}

/* Morocco accent system — restrained red + green */
:root{
  --morocco-red:#b5232b;
  --morocco-green:#0b6b43;
  --morocco-red-soft:rgba(181,35,43,.16);
  --morocco-green-soft:rgba(11,107,67,.16);
}

/* A slim national-color signature, kept intentionally understated */
body::before{
  content:"";
  position:fixed;
  z-index:100;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg,var(--morocco-red) 0 50%,var(--morocco-green) 50% 100%);
  pointer-events:none;
}

/* Editorial micro-accents */
.eyebrow::before,.kicker::before{
  content:"";
  display:inline-block;
  width:24px;
  height:2px;
  margin-right:10px;
  vertical-align:middle;
  background:linear-gradient(90deg,var(--morocco-red) 0 50%,var(--morocco-green) 50% 100%);
}

.mini-cta{
  border-image:linear-gradient(90deg,var(--morocco-red),var(--morocco-green)) 1;
}

.circle-link{
  position:relative;
  border-color:rgba(255,255,255,.42);
}
.circle-link::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:50%;
  padding:1px;
  background:conic-gradient(from 215deg,var(--morocco-red),transparent 28%,transparent 62%,var(--morocco-green));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  opacity:.72;
  transition:opacity .35s ease,transform .5s ease;
}
.circle-link:hover::before{opacity:1;transform:rotate(16deg)}

/* Hero glow remains almost monochrome */
.hero::after{
  content:"";
  position:absolute;
  inset:auto -12vw -24vh auto;
  width:52vw;
  height:52vw;
  border-radius:50%;
  background:
    radial-gradient(circle at 38% 48%,var(--morocco-red-soft),transparent 42%),
    radial-gradient(circle at 62% 52%,var(--morocco-green-soft),transparent 42%);
  filter:blur(70px);
  opacity:.5;
  pointer-events:none;
}

/* Pinned scenes: color only in active editorial details */
.service-card.active span{
  color:var(--morocco-red);
}
.service-card.active h3::after{
  content:"";
  display:block;
  width:72px;
  height:3px;
  margin-top:16px;
  background:linear-gradient(90deg,var(--morocco-red),var(--morocco-green));
}
.pin-stage::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0;
  background:linear-gradient(135deg,rgba(181,35,43,.08),transparent 28%,transparent 70%,rgba(11,107,67,.08));
  pointer-events:none;
}

/* Tourism exploded scene */
.exploded-copy::after{
  border-image:linear-gradient(90deg,var(--morocco-red),var(--morocco-green),transparent 72%) 1;
}
.exploded-copy h2 em{
  position:relative;
}
.exploded-copy h2 em::after{
  content:"";
  position:absolute;
  left:3%;
  right:0;
  bottom:-.06em;
  height:.035em;
  min-height:3px;
  background:linear-gradient(90deg,var(--morocco-red),var(--morocco-green));
  transform:skewX(-18deg);
  opacity:.8;
}
.layer:nth-child(even){border-color:rgba(181,35,43,.34)}
.layer:nth-child(odd){border-color:rgba(11,107,67,.34)}
.layer:nth-child(even) b{color:#e0a4a8}
.layer:nth-child(odd) b{color:#8fc4aa}

/* Portfolio and statistics */
.project h3::before{
  content:"";
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:13px;
  border-radius:50%;
  background:var(--morocco-green);
  box-shadow:14px 0 0 var(--morocco-red);
  vertical-align:.18em;
}
.numbers div:nth-child(odd) strong{color:#f2f2f2;text-shadow:2px 0 0 rgba(181,35,43,.55)}
.numbers div:nth-child(even) strong{color:#f2f2f2;text-shadow:2px 0 0 rgba(11,107,67,.6)}

/* Process and final CTA */
.process li span{color:var(--morocco-green)}
.process li:nth-child(even) span{color:var(--morocco-red)}
.cta>a{
  border-image:linear-gradient(90deg,var(--morocco-red),var(--morocco-green),rgba(255,255,255,.2)) 1;
}
.cta>a span{
  background:linear-gradient(135deg,var(--morocco-red),var(--morocco-green));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Cursor picks up the dual accent without overwhelming the interface */
.cursor{border-color:var(--morocco-green)}
.cursor-dot{background:var(--morocco-red)}

@media(max-width:900px){
  body::before{height:2px}
  .hero::after{width:90vw;height:90vw;opacity:.35}
}

/* Portée custom star cursor */
@media (pointer:fine){
  html,body,a,button,[role="button"]{cursor:none!important}
  .cursor{
    width:40px;
    height:40px;
    border:0!important;
    border-radius:0;
    background:url('star-cursor.png') center/contain no-repeat;
    filter:invert(1);
    mix-blend-mode:difference;
    transition:transform .18s cubic-bezier(.2,.8,.2,1),opacity .18s ease;
    transform:translate(-50%,-50%) scale(1);
    will-change:left,top,transform;
  }
  .cursor-dot{display:none!important}
}


/* Hero video integration */
.hero-video-wrap{overflow:hidden;background:#0c0c0c}
.hero-video{width:100%;height:100%;display:block;object-fit:cover;object-position:center;filter:grayscale(1) contrast(1.08);pointer-events:none}
.hero-video-wrap::after{z-index:2}
@media(max-width:900px){.hero-video{object-position:58% center}}
@media(prefers-reduced-motion:reduce){.hero-video{display:none}.hero-video-wrap{background:url('hero-moroccan-desk.webp') center/cover no-repeat}}

/* Full-bleed hero video: remove the visible top seam */
.hero{
  isolation:isolate;
  background:#080808;
}
.hero-video-wrap{
  position:absolute;
  inset:0;
  top:0;
  right:0;
  width:100%;
  height:100%;
  opacity:1;
  transform:none !important;
  mix-blend-mode:normal;
  z-index:0;
  border:0;
}
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
}
.hero-video-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(90deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.72) 33%,rgba(8,8,8,.18) 68%,rgba(8,8,8,.08) 100%);
  pointer-events:none;
}
.hero-video-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(8,8,8,.28) 0%,transparent 25%,transparent 72%,rgba(8,8,8,.38) 100%);
  pointer-events:none;
}
.hero-grid{z-index:1}
.hero-copy,.scroll-index{z-index:3}
.topbar{background:linear-gradient(180deg,rgba(8,8,8,.46),rgba(8,8,8,0));}

@media(max-width:900px){
  .hero-video-wrap{inset:0;width:100%;height:100%;right:0;top:0;opacity:1}
  .hero-video{object-position:60% center}
  .hero-video-wrap::before{background:linear-gradient(90deg,rgba(8,8,8,.88),rgba(8,8,8,.38) 70%,rgba(8,8,8,.18))}
}

/* Reframe hero video so the generated provenance mark sits outside the visible crop */
.hero-video{
  width:116%;
  height:116%;
  left:-2%;
  top:-8%;
  object-position:center center;
}
@media(max-width:900px){
  .hero-video{
    width:125%;
    height:118%;
    left:-7%;
    top:-9%;
    object-position:62% center;
  }
}


/* Language control, contact information and WhatsApp */
.lang-toggle{
  appearance:none;border:1px solid currentColor;background:transparent;color:inherit;
  min-width:46px;height:34px;padding:0 12px;border-radius:999px;font:600 11px/1 var(--sans,Arial,sans-serif);
  letter-spacing:.12em;text-transform:uppercase;transition:background .25s,color .25s,transform .25s;
}
.lang-toggle:hover{background:currentColor;color:#0b0b0b;transform:translateY(-1px)}
.cta footer a{color:inherit;text-decoration:none;transition:opacity .2s}.cta footer a:hover{opacity:.55}
.whatsapp-float{
  position:fixed;right:24px;bottom:24px;z-index:9998;display:flex;align-items:center;gap:10px;
  min-height:52px;padding:8px 18px 8px 8px;border-radius:999px;background:#0b6b43;color:#fff;
  text-decoration:none;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  transition:transform .25s ease,box-shadow .25s ease,background .25s ease;
}
.whatsapp-float:hover{transform:translateY(-4px);box-shadow:0 20px 48px rgba(0,0,0,.36);background:#075b38}
.whatsapp-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:#0b6b43}.whatsapp-icon svg{width:22px;height:22px;display:block;fill:currentColor}
@media(max-width:900px){
  .topbar{gap:10px}.topbar nav{display:none}.lang-toggle{margin-left:auto}.mini-cta{display:none}
  .whatsapp-float{right:14px;bottom:14px;width:52px;height:52px;min-height:52px;padding:8px;border-radius:50%}.whatsapp-label{display:none}.whatsapp-icon{width:36px;height:36px}
  .cta footer{gap:12px;flex-wrap:wrap}
}

/* Real portfolio project interaction */
.project-link{display:block;color:inherit;text-decoration:none;cursor:pointer}
.project img{transition:filter .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.project:hover img,.project:focus-visible img{filter:grayscale(0) contrast(1);transform:scale(1.012)}
.project-link:focus-visible{outline:2px solid var(--morocco-green);outline-offset:8px}

/* Portfolio presentation refinement: full screenshots + single-line project titles */
.project{width:min(78vw,1120px)}
.project img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
  object-position:center;
  background:#0b0b0b;
}
.project div{
  grid-template-columns:150px max-content minmax(260px,1fr);
  column-gap:34px;
}
.project h3{
  white-space:nowrap;
  font-size:clamp(30px,2.65vw,46px);
  line-height:1;
}
.project p{text-align:right}

@media(max-width:900px){
  .project{width:90vw}
  .project img{aspect-ratio:16/9;height:auto;object-fit:contain}
  .project div{grid-template-columns:1fr;gap:8px}
  .project h3{white-space:normal;font-size:34px}
  .project p{text-align:left}
}


/* =========================================================
   Portée Studio — warm Moroccan campaign media refresh
   Portfolio project images intentionally remain unchanged.
   ========================================================= */

/* Hero: use the new bright editorial image, preserving a dark text-safe area. */
.hero-image-wrap{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  opacity:1!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  overflow:hidden;
  background:#111;
}
.hero-new-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:none;
}
.hero-image-wrap::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,rgba(7,7,7,.92) 0%,rgba(7,7,7,.80) 30%,rgba(7,7,7,.32) 58%,rgba(7,7,7,.06) 100%),
    linear-gradient(180deg,rgba(0,0,0,.20),transparent 42%,rgba(0,0,0,.32));
  pointer-events:none;
}
.hero-image-wrap::after{display:none!important}
.hero-copy,.hero-grid,.scroll-index{position:relative;z-index:3}

/* Capability scenes: show the new campaign colors rather than forcing grayscale. */
.stage-object{
  inset:3%;
  width:94%;
  height:94%;
  object-fit:cover;
  opacity:.74;
  filter:saturate(.92) contrast(1.02) brightness(.84);
  mix-blend-mode:normal;
}
.pin-stage::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,rgba(5,5,5,.05),rgba(5,5,5,.18) 50%,rgba(5,5,5,.72));
  pointer-events:none;
}

/* Tourism exploded stack: each layer represents a real operational function. */
.product-slice{
  background-size:cover!important;
  background-position:center!important;
  filter:saturate(.92) contrast(1.02);
}
.slice-1{background-image:url('strategy-growth-new.webp')!important;background-position:center 38%!important}
.slice-2{background-image:url('content-production-new.webp')!important;background-position:center 46%!important}
.slice-3{background-image:url('tourism-setup-new.webp')!important;background-position:center 43%!important}
.slice-4{background-image:url('booking-system-new.webp')!important;background-position:center 46%!important}
.slice-5{background-image:url('traffic-growth-new.webp')!important;background-position:center 48%!important}

/* Process studio: retain natural warmth and material detail. */
.process-art{
  background:#e8dfd2;
}
.process-art img{
  width:100%;
  height:100%;
  object-fit:cover;
  max-width:none;
  filter:saturate(.92) contrast(1.02);
  mix-blend-mode:normal;
}

/* Subtle portfolio-section atmosphere, without touching the four projects. */
.work{
  position:relative;
  isolation:isolate;
}
.work::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    linear-gradient(180deg,rgba(17,17,17,.90),rgba(17,17,17,.98)),
    url('portfolio-showcase-new.webp') center top/cover no-repeat;
  opacity:1;
}

/* Final CTA uses the new uplifting Moroccan architectural image. */
.cta::before{
  background:url('cta-new.webp?v=3') center/cover no-repeat!important;
  opacity:.82!important;
  filter:saturate(.9) contrast(1.03)!important;
}
.cta::after{
  background:
    linear-gradient(90deg,rgba(5,5,5,.82),rgba(5,5,5,.25) 55%,rgba(5,5,5,.18)),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.46))!important;
}

/* Use the contact still as a restrained visual accent behind the CTA prompt. */
.cta>p{
  max-width:430px;
}
.cta>p::after{
  content:"";
  display:block;
  width:190px;
  aspect-ratio:4/5;
  margin-top:22px;
  border-radius:4px;
  background:url('contact-new.webp') center/cover no-repeat;
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  opacity:.82;
}

@media(max-width:900px){
  .hero-new-image{object-position:63% center}
  .hero-image-wrap::before{
    background:linear-gradient(90deg,rgba(7,7,7,.90),rgba(7,7,7,.55) 70%,rgba(7,7,7,.22));
  }
  .stage-object{opacity:.66}
  .cta>p::after{width:130px}
}


/* Final correction: full tourism image + original hero colors */
.hero-new-image{
  filter:none!important;
  opacity:1!important;
  object-position:center center!important;
}
.hero-image-wrap::before{
  background:
    linear-gradient(90deg,rgba(6,6,6,.70) 0%,rgba(6,6,6,.48) 25%,rgba(6,6,6,.14) 47%,rgba(6,6,6,0) 68%)!important;
}
.hero-image-wrap::after{display:none!important}

.exploded-single-media{
  inset:5% 2%!important;
  width:96%!important;
  height:90%!important;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 28px 45px rgba(0,0,0,.14))!important;
  transform-style:flat!important;
}
.tourism-full-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:20px;
  filter:none;
}
@media(max-width:900px){
  .hero-new-image{object-position:62% center!important}
  .hero-image-wrap::before{
    background:linear-gradient(90deg,rgba(6,6,6,.72),rgba(6,6,6,.35) 65%,rgba(6,6,6,.06))!important;
  }
  .exploded-single-media{inset:2% 0!important;width:100%!important;height:96%!important}
}

/* Final CTA readability correction */
.cta::before{
  opacity:.68!important;
  filter:saturate(.82) contrast(1.06) brightness(.72)!important;
}
.cta::after{
  background:
    linear-gradient(90deg,rgba(4,4,4,.90) 0%,rgba(4,4,4,.72) 48%,rgba(4,4,4,.58) 100%),
    linear-gradient(180deg,rgba(0,0,0,.30) 0%,rgba(0,0,0,.62) 100%)!important;
}
.cta>a{
  color:#fff!important;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
}
.cta>a span{
  background:none!important;
  -webkit-background-clip:initial!important;
  background-clip:initial!important;
  color:#fff!important;
}
.cta>p,
.cta footer,
.cta footer a{
  color:rgba(255,255,255,.90)!important;
  text-shadow:0 1px 10px rgba(0,0,0,.45);
}
.cta footer{
  border-top-color:rgba(255,255,255,.28)!important;
}
.cta>p::after{
  opacity:.58!important;
}

@media(max-width:900px){
  .cta::after{
    background:linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.78))!important;
  }
}


/* =========================================================
   Final CTA — keep the architectural image visible while
   maintaining strong, localized text contrast.
   ========================================================= */

.cta::before{
  opacity:.96!important;
  filter:saturate(.98) contrast(1.01) brightness(.98)!important;
}

.cta::after{
  background:
    linear-gradient(90deg,
      rgba(5,5,5,.58) 0%,
      rgba(5,5,5,.38) 32%,
      rgba(5,5,5,.10) 58%,
      rgba(5,5,5,.04) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.03) 0%,
      rgba(0,0,0,.02) 54%,
      rgba(0,0,0,.54) 100%
    )!important;
}

.cta h2,
.cta .cta-title,
.cta .cta-arrow{
  color:#fff!important;
  text-shadow:0 3px 24px rgba(0,0,0,.48);
}

.cta footer,
.cta .footer-row,
.cta .footer-meta{
  position:relative;
  z-index:3;
}

.cta footer::before,
.cta .footer-row::before,
.cta .footer-meta::before{
  content:"";
  position:absolute;
  inset:-18px -28px;
  z-index:-1;
  background:linear-gradient(90deg,rgba(5,5,5,.62),rgba(5,5,5,.30) 60%,rgba(5,5,5,.06));
  border-radius:8px;
  backdrop-filter:blur(2px);
  pointer-events:none;
}

.cta footer,
.cta footer a,
.cta .footer-row,
.cta .footer-row a,
.cta .footer-meta,
.cta .footer-meta a{
  color:#fff!important;
  text-shadow:0 2px 12px rgba(0,0,0,.55);
}

@media(max-width:900px){
  .cta::after{
    background:
      linear-gradient(90deg,rgba(5,5,5,.60),rgba(5,5,5,.22) 75%,rgba(5,5,5,.06)),
      linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.48))!important;
  }
}


/* =========================================================
   Fixed glass navigation on scroll
   ========================================================= */

.site-header,
header.site-header,
header{
  transition:
    background-color .35s ease,
    backdrop-filter .35s ease,
    -webkit-backdrop-filter .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

.site-header.is-scrolled,
header.site-header.is-scrolled,
header.is-scrolled{
  background:rgba(12,12,12,.58)!important;
  -webkit-backdrop-filter:blur(18px) saturate(135%);
  backdrop-filter:blur(18px) saturate(135%);
  border-bottom:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}

.site-header.is-scrolled .brand img,
header.site-header.is-scrolled .brand img,
header.is-scrolled .brand img{
  filter:none!important;
}

.site-header.is-scrolled a,
.site-header.is-scrolled button,
header.site-header.is-scrolled a,
header.site-header.is-scrolled button,
header.is-scrolled a,
header.is-scrolled button{
  color:#fff!important;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}

.site-header.is-scrolled .lang-switch,
header.site-header.is-scrolled .lang-switch,
header.is-scrolled .lang-switch{
  border-color:rgba(255,255,255,.28)!important;
  background:rgba(255,255,255,.06)!important;
}

@media(max-width:900px){
  .site-header.is-scrolled,
  header.site-header.is-scrolled,
  header.is-scrolled{
    background:rgba(12,12,12,.72)!important;
    -webkit-backdrop-filter:blur(16px) saturate(130%);
    backdrop-filter:blur(16px) saturate(130%);
  }
}


/* =========================================================
   Tourism layout refinement
   - image left / copy right
   - larger clean service buttons
   - mobile-safe layout
   - numeric counter hidden
   ========================================================= */

/* Hide any remaining hero slide/counter indicators. */
.scroll-index,
.hero-index,
.slide-index,
.hero-counter,
[data-hero-index]{
  display:none!important;
}

/* Reverse tourism section on desktop: visual left, text right. */
.tourism-pin,
.tourism-layout,
.tourism-grid,
.tourism-inner,
.tourism-stage,
.tourism .pin-inner{
  direction:ltr;
}

.tourism-pin,
.tourism-layout,
.tourism-grid,
.tourism-inner,
.tourism .pin-inner{
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(380px,.85fr)!important;
  align-items:center!important;
  gap:clamp(42px,6vw,110px)!important;
}

/* Put the visual area first and the copy second. */
.tourism-visual,
.tourism-media,
.tourism-art,
.tourism-product,
.product-stage,
.exploded-system,
.exploded-product,
.tourism .visual{
  grid-column:1!important;
  grid-row:1!important;
  order:1!important;
}

.tourism-copy,
.tourism-content,
.tourism-text,
.tourism .copy{
  grid-column:2!important;
  grid-row:1!important;
  order:2!important;
  padding-inline:0 clamp(28px,5vw,90px)!important;
}

/* Full image presentation. */
.tourism-visual img,
.tourism-media img,
.tourism-art img,
.tourism-product img,
.exploded-product img,
.tourism .visual img{
  width:100%!important;
  height:auto!important;
  max-height:min(78vh,900px)!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Turn tourism labels into bigger, cleaner buttons. */
.tourism .service-label,
.tourism .service-tag,
.tourism .tourism-label,
.tourism .floating-label,
.tourism .product-label,
.tourism .exploded-label,
.tourism [class*="label"]{
  min-width:clamp(230px,19vw,340px)!important;
  min-height:64px!important;
  padding:18px 28px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  border-radius:999px!important;
  background:rgba(20,20,20,.88)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.16)!important;
  backdrop-filter:blur(14px) saturate(120%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(120%)!important;
  font-size:clamp(15px,1.05vw,19px)!important;
  font-weight:600!important;
  line-height:1.2!important;
  text-align:center!important;
  white-space:normal!important;
}

/* Remove small numeric prefixes inside service buttons. */
.tourism .service-label > span:first-child,
.tourism .service-tag > span:first-child,
.tourism .tourism-label > span:first-child,
.tourism .floating-label > span:first-child,
.tourism .product-label > span:first-child,
.tourism .exploded-label > span:first-child{
  display:none!important;
}

/* Gentle Moroccan accent on hover/active states. */
.tourism .service-label:hover,
.tourism .service-tag:hover,
.tourism .tourism-label:hover,
.tourism .floating-label:hover,
.tourism .product-label:hover,
.tourism .exploded-label:hover,
.tourism [class*="label"].is-active{
  background:linear-gradient(90deg,rgba(193,39,45,.92),rgba(0,98,51,.92))!important;
  transform:translateY(-2px)!important;
}

/* Keep labels around the image but avoid edge clipping. */
.tourism,
.tourism-pin,
.tourism-layout,
.tourism-grid,
.tourism-inner,
.tourism-stage,
.product-stage,
.exploded-system{
  overflow:visible!important;
}

/* Tablet/mobile: image first, text second, labels become a clean grid. */
@media(max-width:980px){
  .tourism-pin,
  .tourism-layout,
  .tourism-grid,
  .tourism-inner,
  .tourism .pin-inner{
    grid-template-columns:1fr!important;
    gap:32px!important;
  }

  .tourism-visual,
  .tourism-media,
  .tourism-art,
  .tourism-product,
  .product-stage,
  .exploded-system,
  .exploded-product,
  .tourism .visual{
    grid-column:1!important;
    grid-row:1!important;
    order:1!important;
    width:100%!important;
  }

  .tourism-copy,
  .tourism-content,
  .tourism-text,
  .tourism .copy{
    grid-column:1!important;
    grid-row:2!important;
    order:2!important;
    padding:0 24px 48px!important;
  }

  .tourism .service-label,
  .tourism .service-tag,
  .tourism .tourism-label,
  .tourism .floating-label,
  .tourism .product-label,
  .tourism .exploded-label,
  .tourism [class*="label"]{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:100%!important;
    min-width:0!important;
    min-height:58px!important;
    margin:10px 0!important;
    padding:16px 20px!important;
    font-size:16px!important;
  }

  .tourism .labels,
  .tourism .service-labels,
  .tourism .floating-labels,
  .tourism .product-labels{
    position:relative!important;
    inset:auto!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:12px!important;
    width:100%!important;
    padding:0 20px 12px!important;
  }
}

@media(max-width:640px){
  .tourism .labels,
  .tourism .service-labels,
  .tourism .floating-labels,
  .tourism .product-labels{
    grid-template-columns:1fr!important;
  }

  .tourism .service-label,
  .tourism .service-tag,
  .tourism .tourism-label,
  .tourism .floating-label,
  .tourism .product-label,
  .tourism .exploded-label,
  .tourism [class*="label"]{
    min-height:56px!important;
    font-size:15px!important;
  }
}

/* =========================================================
   Capabilities pinned scene — clean editorial card layout
   Fixes overlapping title and description on every language.
   ========================================================= */

.pin-stage{
  padding:0!important;
  display:block!important;
}

.stage-visual{
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
}

.stage-object{
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  opacity:1!important;
  filter:saturate(.9) contrast(1.03) brightness(.74)!important;
}

.pin-stage::after{
  z-index:1!important;
  background:
    linear-gradient(180deg,rgba(5,5,5,.04) 0%,rgba(5,5,5,.18) 48%,rgba(5,5,5,.88) 100%),
    linear-gradient(90deg,rgba(5,5,5,.16),transparent 70%)!important;
}

.service-card{
  position:absolute!important;
  left:clamp(28px,4vw,72px)!important;
  right:clamp(28px,4vw,72px)!important;
  bottom:clamp(34px,5vw,78px)!important;
  z-index:4!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr)!important;
  grid-template-rows:auto!important;
  column-gap:clamp(34px,5vw,90px)!important;
  align-items:end!important;
  padding:0!important;
  opacity:0;
  transform:translateY(42px);
  transition:opacity .55s ease,transform .65s cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}

.service-card.active{
  opacity:1!important;
  transform:none!important;
}

.service-card h3{
  grid-column:1!important;
  grid-row:1!important;
  margin:0!important;
  max-width:720px!important;
  font-size:clamp(48px,5.5vw,94px)!important;
  line-height:.88!important;
  letter-spacing:-.055em!important;
  color:#fff!important;
  text-wrap:balance;
}

.service-card h3::after{
  width:84px!important;
  height:3px!important;
  margin-top:22px!important;
}

.service-card p{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  max-width:460px!important;
  margin:0 0 3px!important;
  padding:22px 0 0!important;
  border-top:1px solid rgba(255,255,255,.3)!important;
  color:rgba(255,255,255,.84)!important;
  font-size:clamp(15px,1.15vw,20px)!important;
  line-height:1.55!important;
  text-wrap:pretty;
}

/* Remove any old hidden numbering column from the service card. */
.service-card > span{
  display:none!important;
}

@media(max-width:1100px){
  .service-card{
    grid-template-columns:1fr!important;
    row-gap:24px!important;
    max-width:820px!important;
  }
  .service-card h3,
  .service-card p{
    grid-column:1!important;
  }
  .service-card h3{grid-row:1!important}
  .service-card p{
    grid-row:2!important;
    max-width:620px!important;
    padding-top:18px!important;
  }
}

@media(max-width:900px){
  .pin-stage{
    height:min(780px,88svh)!important;
    min-height:650px!important;
  }
  .service-card{
    left:24px!important;
    right:24px!important;
    bottom:28px!important;
    row-gap:18px!important;
  }
  .service-card h3{
    font-size:clamp(44px,12vw,72px)!important;
    line-height:.91!important;
    max-width:100%!important;
  }
  .service-card p{
    font-size:15px!important;
    line-height:1.5!important;
    max-width:100%!important;
  }
}

@media(max-width:520px){
  .pin-stage{
    min-height:610px!important;
  }
  .service-card h3{
    font-size:clamp(38px,12vw,58px)!important;
  }
  .service-card h3::after{
    margin-top:15px!important;
    width:60px!important;
  }
}


/* =========================================================
   Language selector visibility fix
   ========================================================= */

.lang-switch,
.language-switch,
[data-language-toggle]{
  color:#fff!important;
  border:1px solid rgba(255,255,255,.72)!important;
  background:rgba(10,10,10,.28)!important;
  -webkit-backdrop-filter:blur(12px) saturate(130%);
  backdrop-filter:blur(12px) saturate(130%);
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
  transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease,
    box-shadow .25s ease!important;
}

.lang-switch:hover,
.lang-switch:focus-visible,
.language-switch:hover,
.language-switch:focus-visible,
[data-language-toggle]:hover,
[data-language-toggle]:focus-visible{
  color:#fff!important;
  background:rgba(10,10,10,.82)!important;
  border-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(0,0,0,.22)!important;
}

.lang-switch *,
.language-switch *,
[data-language-toggle] *{
  color:inherit!important;
  opacity:1!important;
  visibility:visible!important;
}

.site-header:not(.is-scrolled) .lang-switch,
header:not(.is-scrolled) .lang-switch,
.site-header:not(.is-scrolled) .language-switch,
header:not(.is-scrolled) .language-switch{
  color:#111!important;
  border-color:rgba(17,17,17,.72)!important;
  background:rgba(255,255,255,.48)!important;
}

.site-header:not(.is-scrolled) .lang-switch:hover,
header:not(.is-scrolled) .lang-switch:hover,
.site-header:not(.is-scrolled) .language-switch:hover,
header:not(.is-scrolled) .language-switch:hover{
  color:#fff!important;
  background:rgba(17,17,17,.88)!important;
  border-color:#111!important;
}

.site-header.is-scrolled .lang-switch,
header.is-scrolled .lang-switch,
.site-header.is-scrolled .language-switch,
header.is-scrolled .language-switch{
  color:#fff!important;
  border-color:rgba(255,255,255,.45)!important;
  background:rgba(255,255,255,.08)!important;
}

.site-header.is-scrolled .lang-switch:hover,
header.is-scrolled .lang-switch:hover,
.site-header.is-scrolled .language-switch:hover,
header.is-scrolled .language-switch:hover{
  color:#fff!important;
  background:rgba(255,255,255,.16)!important;
  border-color:#fff!important;
}

/* Actual language button hover fix */
.lang-toggle{
  position:relative!important;
  z-index:120!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:66px!important;
  min-height:48px!important;
  padding:0 18px!important;
  border:1px solid rgba(17,17,17,.85)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.72)!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
  overflow:visible!important;
  transition:background-color .22s ease,color .22s ease,border-color .22s ease,box-shadow .22s ease,transform .22s ease!important;
}
.lang-toggle:hover,
.lang-toggle:focus,
.lang-toggle:focus-visible,
.lang-toggle:active{
  background:#111!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#111!important;
  opacity:1!important;
  visibility:visible!important;
  transform:translateY(-1px)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.22)!important;
}
.lang-toggle::before,
.lang-toggle::after{
  display:none!important;
  content:none!important;
}
.lang-toggle *{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
}
.topbar.is-scrolled .lang-toggle,
.site-header.is-scrolled .lang-toggle,
header.is-scrolled .lang-toggle{
  background:rgba(12,12,12,.52)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.58)!important;
}
.topbar.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .lang-toggle:hover,
header.is-scrolled .lang-toggle:hover{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  border-color:#fff!important;
}
@media(max-width:900px){
  .lang-toggle{
    min-width:58px!important;
    min-height:44px!important;
    padding:0 15px!important;
  }
}

/* =========================================================
   Clean language selector — matches navigation styling
   ========================================================= */
.lang-toggle{
  position:relative!important;
  z-index:120!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  min-width:54px!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 15px!important;
  border:1px solid currentColor!important;
  border-radius:999px!important;
  background:transparent!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
  mix-blend-mode:normal!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font:inherit!important;
  font-size:14px!important;
  font-weight:500!important;
  letter-spacing:.04em!important;
  line-height:1!important;
  transform:none!important;
  transition:background-color .22s ease,border-color .22s ease,color .22s ease,transform .22s ease!important;
}

.lang-toggle:hover,
.lang-toggle:focus-visible,
.lang-toggle:active{
  background:rgba(255,255,255,.12)!important;
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  border-color:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
  box-shadow:none!important;
  transform:translateY(-1px)!important;
}

.lang-toggle::before,
.lang-toggle::after{
  display:none!important;
  content:none!important;
}

.lang-toggle *{
  color:inherit!important;
  -webkit-text-fill-color:currentColor!important;
  opacity:1!important;
  visibility:visible!important;
}

/* Hero/navigation state */
.topbar:not(.is-scrolled) .lang-toggle,
.site-header:not(.is-scrolled) .lang-toggle,
header:not(.is-scrolled) .lang-toggle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.78)!important;
  background:rgba(0,0,0,.08)!important;
}

.topbar:not(.is-scrolled) .lang-toggle:hover,
.site-header:not(.is-scrolled) .lang-toggle:hover,
header:not(.is-scrolled) .lang-toggle:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
  background:rgba(255,255,255,.12)!important;
}

/* Scrolled glass header state */
.topbar.is-scrolled .lang-toggle,
.site-header.is-scrolled .lang-toggle,
header.is-scrolled .lang-toggle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:rgba(255,255,255,.58)!important;
  background:transparent!important;
}

.topbar.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .lang-toggle:hover,
header.is-scrolled .lang-toggle:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
  background:rgba(255,255,255,.10)!important;
}

@media(max-width:900px){
  .lang-toggle{
    min-width:50px!important;
    height:36px!important;
    min-height:36px!important;
    padding:0 13px!important;
    font-size:13px!important;
  }
}


/* =========================================================
   Clean uniform glass navigation
   Removes the washed-out white fog band.
   ========================================================= */

.site-header,
header.site-header,
header.topbar,
.topbar{
  isolation:isolate!important;
}

/* Remove any decorative gradient/fog pseudo-elements inside header */
.site-header::before,
.site-header::after,
header.site-header::before,
header.site-header::after,
header.topbar::before,
header.topbar::after,
.topbar::before,
.topbar::after{
  content:none!important;
  display:none!important;
}

/* Clean scrolled state */
.site-header.is-scrolled,
header.site-header.is-scrolled,
header.topbar.is-scrolled,
.topbar.is-scrolled,
header.is-scrolled{
  background:rgba(12,12,12,.76)!important;
  background-image:none!important;
  -webkit-backdrop-filter:blur(18px) saturate(125%)!important;
  backdrop-filter:blur(18px) saturate(125%)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.22)!important;
}

/* Keep the full header content crisp and above the glass */
.site-header > *,
header.site-header > *,
header.topbar > *,
.topbar > *{
  position:relative!important;
  z-index:2!important;
  opacity:1!important;
  filter:none!important;
}

/* Logo clarity */
.site-header .brand,
.site-header .brand img,
header.site-header .brand,
header.site-header .brand img,
.topbar .brand,
.topbar .brand img{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Menu clarity */
.site-header nav a,
header.site-header nav a,
.topbar nav a,
.site-header .nav a,
header.site-header .nav a,
.topbar .nav a{
  color:rgba(255,255,255,.92)!important;
  -webkit-text-fill-color:rgba(255,255,255,.92)!important;
  text-shadow:none!important;
  opacity:1!important;
  filter:none!important;
}

.site-header nav a:hover,
header.site-header nav a:hover,
.topbar nav a:hover,
.site-header .nav a:hover,
header.site-header .nav a:hover,
.topbar .nav a:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* CTA clarity */
.site-header .header-cta,
.site-header .nav-cta,
header.site-header .header-cta,
header.site-header .nav-cta,
.topbar .header-cta,
.topbar .nav-cta{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  text-shadow:none!important;
}

/* Language selector aligned with the same nav treatment */
.site-header .lang-toggle,
header.site-header .lang-toggle,
.topbar .lang-toggle{
  background:transparent!important;
  border:1px solid rgba(255,255,255,.48)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  opacity:1!important;
}

.site-header .lang-toggle:hover,
header.site-header .lang-toggle:hover,
.topbar .lang-toggle:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.85)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* On the unscrolled hero, keep header transparent and crisp */
.site-header:not(.is-scrolled),
header.site-header:not(.is-scrolled),
header.topbar:not(.is-scrolled),
.topbar:not(.is-scrolled){
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Mobile */
@media(max-width:900px){
  .site-header.is-scrolled,
  header.site-header.is-scrolled,
  header.topbar.is-scrolled,
  .topbar.is-scrolled,
  header.is-scrolled{
    background:rgba(12,12,12,.84)!important;
    -webkit-backdrop-filter:blur(16px) saturate(120%)!important;
    backdrop-filter:blur(16px) saturate(120%)!important;
  }
}


/* =========================================================
   Fixed navigation — solid dark bar, no glass effect
   ========================================================= */

.site-header.is-scrolled,
header.site-header.is-scrolled,
header.topbar.is-scrolled,
.topbar.is-scrolled,
header.is-scrolled{
  background:#111!important;
  background-image:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
}

/* Remove all transparency/blur from header controls */
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .lang-toggle{
  background:transparent!important;
  border-color:rgba(255,255,255,.42)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.site-header.is-scrolled .lang-toggle:hover,
header.site-header.is-scrolled .lang-toggle:hover,
header.topbar.is-scrolled .lang-toggle:hover,
.topbar.is-scrolled .lang-toggle:hover{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  border-color:#fff!important;
}

/* Keep top-of-page state transparent */
.site-header:not(.is-scrolled),
header.site-header:not(.is-scrolled),
header.topbar:not(.is-scrolled),
.topbar:not(.is-scrolled){
  background:transparent!important;
  box-shadow:none!important;
  border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}


/* =========================================================
   Fixed navigation — Moroccan tinted glass
   Keeps nav element colors consistent while scrolling.
   ========================================================= */

.site-header.is-scrolled,
header.site-header.is-scrolled,
header.topbar.is-scrolled,
.topbar.is-scrolled,
header.is-scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(150,24,30,.34) 0%,
      rgba(18,18,18,.68) 34%,
      rgba(18,18,18,.68) 66%,
      rgba(0,92,50,.34) 100%
    )!important;
  background-color:rgba(15,15,15,.64)!important;
  -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  backdrop-filter:blur(18px) saturate(145%)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 10px 34px rgba(0,0,0,.22)!important;
}

/* Keep all navigation elements consistently white */
.site-header.is-scrolled .brand,
.site-header.is-scrolled .brand img,
.site-header.is-scrolled nav a,
.site-header.is-scrolled .nav a,
.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .nav-cta,
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .brand,
header.site-header.is-scrolled .brand img,
header.site-header.is-scrolled nav a,
header.site-header.is-scrolled .nav a,
header.site-header.is-scrolled .header-cta,
header.site-header.is-scrolled .nav-cta,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .brand,
header.topbar.is-scrolled .brand img,
header.topbar.is-scrolled nav a,
header.topbar.is-scrolled .nav a,
header.topbar.is-scrolled .header-cta,
header.topbar.is-scrolled .nav-cta,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .brand,
.topbar.is-scrolled .brand img,
.topbar.is-scrolled nav a,
.topbar.is-scrolled .nav a,
.topbar.is-scrolled .header-cta,
.topbar.is-scrolled .nav-cta,
.topbar.is-scrolled .lang-toggle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
  text-shadow:0 1px 10px rgba(0,0,0,.24)!important;
  mix-blend-mode:normal!important;
}

/* Clean language selector within tinted glass */
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .lang-toggle{
  background:rgba(255,255,255,.06)!important;
  border:1px solid rgba(255,255,255,.48)!important;
  box-shadow:none!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.site-header.is-scrolled .lang-toggle:hover,
header.site-header.is-scrolled .lang-toggle:hover,
header.topbar.is-scrolled .lang-toggle:hover,
.topbar.is-scrolled .lang-toggle:hover{
  background:rgba(255,255,255,.15)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
}

/* Preserve the transparent hero state */
.site-header:not(.is-scrolled),
header.site-header:not(.is-scrolled),
header.topbar:not(.is-scrolled),
.topbar:not(.is-scrolled){
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-bottom-color:transparent!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Mobile tuning */
@media(max-width:900px){
  .site-header.is-scrolled,
  header.site-header.is-scrolled,
  header.topbar.is-scrolled,
  .topbar.is-scrolled,
  header.is-scrolled{
    background:
      linear-gradient(
        90deg,
        rgba(150,24,30,.30) 0%,
        rgba(16,16,16,.76) 38%,
        rgba(16,16,16,.76) 62%,
        rgba(0,92,50,.30) 100%
      )!important;
    -webkit-backdrop-filter:blur(16px) saturate(140%)!important;
    backdrop-filter:blur(16px) saturate(140%)!important;
  }
}


/* =========================================================
   Language dropdown — EN / FR / AR
   ========================================================= */

.language-selector{
  position:relative;
  z-index:160;
  display:flex;
  align-items:center;
  justify-content:center;
}

.lang-toggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-width:76px!important;
  height:46px!important;
  padding:0 16px!important;
  border:1px solid rgba(255,255,255,.58)!important;
  border-radius:999px!important;
  background:rgba(12,12,12,.16)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  opacity:1!important;
  cursor:pointer!important;
  transition:background .22s ease,border-color .22s ease,transform .22s ease!important;
}

.lang-toggle:hover,
.language-selector.is-open .lang-toggle{
  background:rgba(12,12,12,.54)!important;
  border-color:#fff!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:translateY(-1px);
}

.lang-current{
  font-size:14px;
  font-weight:650;
  letter-spacing:.08em;
}

.lang-chevron{
  width:11px;
  height:8px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  transition:transform .22s ease;
}

.language-selector.is-open .lang-chevron{
  transform:rotate(180deg);
}

.language-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:50%;
  width:190px;
  padding:8px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  background:rgba(14,14,14,.94);
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,-8px) scale(.98);
  transform-origin:top center;
  transition:opacity .2s ease,visibility .2s ease,transform .2s ease;
}

.language-selector.is-open .language-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}

.language-option{
  width:100%;
  min-height:52px;
  display:grid;
  grid-template-columns:38px 1fr;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:rgba(255,255,255,.78);
  text-align:left;
  cursor:pointer;
  transition:background .18s ease,color .18s ease;
}

.language-option:hover,
.language-option.is-active{
  background:rgba(255,255,255,.09);
  color:#fff;
}

.language-option>span{
  font-size:13px;
  font-weight:700;
  letter-spacing:.08em;
}

.language-option small{
  font-size:14px;
  color:inherit;
}

.language-option-ar small{
  font-family:Arial,"Noto Sans Arabic",sans-serif;
  font-size:15px;
}

.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .lang-toggle{
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(255,255,255,.48)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.site-header.is-scrolled .lang-toggle:hover,
header.site-header.is-scrolled .lang-toggle:hover,
header.topbar.is-scrolled .lang-toggle:hover,
.topbar.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.topbar.is-scrolled .language-selector.is-open .lang-toggle,
.topbar.is-scrolled .language-selector.is-open .lang-toggle{
  background:rgba(255,255,255,.14)!important;
  border-color:#fff!important;
}



/* =========================================================
   Clean editorial tables
   ========================================================= */

/* Expertise row: true bordered table */
.manifesto-meta{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  border:1px solid var(--line)!important;
  border-radius:0!important;
  overflow:hidden!important;
  background:#f4f2ed!important;
}

.manifesto-meta p{
  min-height:112px!important;
  margin:0!important;
  padding:26px 28px!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:flex-start!important;
  border-right:1px solid var(--line)!important;
  border-top:0!important;
  font-size:15px!important;
  font-weight:500!important;
  line-height:1.35!important;
  background:transparent!important;
}

.manifesto-meta p:last-child{
  border-right:0!important;
}

/* Stats: clean full-width table rows */
.numbers{
  padding:7vw var(--pad)!important;
  background:#111!important;
  color:#fff!important;
}

.numbers div{
  display:grid!important;
  grid-template-columns:minmax(180px,28%) 1fr!important;
  align-items:center!important;
  min-height:180px!important;
  padding:28px 34px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-bottom:0!important;
  background:rgba(255,255,255,.015)!important;
}

.numbers div:last-child{
  border-bottom:1px solid rgba(255,255,255,.16)!important;
}

.numbers strong{
  font-size:clamp(64px,7.5vw,122px)!important;
  line-height:.85!important;
  letter-spacing:-.06em!important;
  color:#fff!important;
}

.numbers span{
  max-width:560px!important;
  font-size:clamp(16px,1.35vw,22px)!important;
  line-height:1.45!important;
  color:rgba(255,255,255,.72)!important;
  padding-left:36px!important;
  border-left:1px solid rgba(255,255,255,.16)!important;
  min-height:92px!important;
  display:flex!important;
  align-items:center!important;
}

/* Language selector now only contains EN / FR */
.language-menu{
  width:178px!important;
}

@media(max-width:900px){
  .manifesto-meta{
    grid-template-columns:1fr 1fr!important;
  }

  .manifesto-meta p{
    min-height:96px!important;
    border-bottom:1px solid var(--line)!important;
  }

  .manifesto-meta p:nth-child(2n){
    border-right:0!important;
  }

  .manifesto-meta p:nth-last-child(-n+2){
    border-bottom:0!important;
  }

  .numbers div{
    grid-template-columns:1fr!important;
    gap:24px!important;
    min-height:0!important;
    padding:28px 24px!important;
  }

  .numbers span{
    padding-left:0!important;
    padding-top:22px!important;
    border-left:0!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    min-height:0!important;
  }
}

@media(max-width:560px){
  .manifesto-meta{
    grid-template-columns:1fr!important;
  }

  .manifesto-meta p{
    border-right:0!important;
    border-bottom:1px solid var(--line)!important;
  }

  /* Undo the 2-column "last row has no bottom border" rule from the
     900px breakpoint — at a single column every row except the true
     last one needs its divider. */
  .manifesto-meta p:nth-last-child(-n+2){
    border-bottom:1px solid var(--line)!important;
  }

  .manifesto-meta p:last-child{
    border-bottom:0!important;
  }
}


/* =========================================================
   Readable fixed navbar
   Dark Moroccan-tinted glass with crisp white elements
   ========================================================= */

.site-header.is-scrolled,
header.site-header.is-scrolled,
header.topbar.is-scrolled,
.topbar.is-scrolled,
header.is-scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(92,12,18,.94) 0%,
      rgba(14,14,14,.96) 28%,
      rgba(14,14,14,.96) 72%,
      rgba(0,63,35,.94) 100%
    )!important;
  background-color:#111!important;
  -webkit-backdrop-filter:blur(10px) saturate(115%)!important;
  backdrop-filter:blur(10px) saturate(115%)!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.34)!important;
  opacity:1!important;
}

/* Remove any fog, light bands or pseudo overlays */
.site-header.is-scrolled::before,
.site-header.is-scrolled::after,
header.site-header.is-scrolled::before,
header.site-header.is-scrolled::after,
header.topbar.is-scrolled::before,
header.topbar.is-scrolled::after,
.topbar.is-scrolled::before,
.topbar.is-scrolled::after{
  display:none!important;
  content:none!important;
}

/* Keep all header items fully opaque and crisp */
.site-header.is-scrolled *,
header.site-header.is-scrolled *,
header.topbar.is-scrolled *,
.topbar.is-scrolled *{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Logo */
.site-header.is-scrolled .brand img,
header.site-header.is-scrolled .brand img,
header.topbar.is-scrolled .brand img,
.topbar.is-scrolled .brand img{
  opacity:1!important;
  filter:none!important;
}

/* Menu links */
.site-header.is-scrolled nav a,
.site-header.is-scrolled .nav a,
header.site-header.is-scrolled nav a,
header.site-header.is-scrolled .nav a,
header.topbar.is-scrolled nav a,
header.topbar.is-scrolled .nav a,
.topbar.is-scrolled nav a,
.topbar.is-scrolled .nav a{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
  font-weight:500!important;
}

.site-header.is-scrolled nav a:hover,
.site-header.is-scrolled .nav a:hover,
header.site-header.is-scrolled nav a:hover,
header.site-header.is-scrolled .nav a:hover,
header.topbar.is-scrolled nav a:hover,
header.topbar.is-scrolled .nav a:hover,
.topbar.is-scrolled nav a:hover,
.topbar.is-scrolled .nav a:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Start-project CTA */
.site-header.is-scrolled .mini-cta,
.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .nav-cta,
header.site-header.is-scrolled .mini-cta,
header.site-header.is-scrolled .header-cta,
header.site-header.is-scrolled .nav-cta,
header.topbar.is-scrolled .mini-cta,
header.topbar.is-scrolled .header-cta,
header.topbar.is-scrolled .nav-cta,
.topbar.is-scrolled .mini-cta,
.topbar.is-scrolled .header-cta,
.topbar.is-scrolled .nav-cta{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-shadow:none!important;
}

/* Language selector */
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .lang-toggle{
  background:rgba(255,255,255,.05)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.56)!important;
  box-shadow:none!important;
  opacity:1!important;
}

.site-header.is-scrolled .lang-toggle:hover,
header.site-header.is-scrolled .lang-toggle:hover,
header.topbar.is-scrolled .lang-toggle:hover,
.topbar.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.topbar.is-scrolled .language-selector.is-open .lang-toggle,
.topbar.is-scrolled .language-selector.is-open .lang-toggle{
  background:rgba(255,255,255,.14)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
}

/* Keep dropdown readable */
.language-menu{
  background:#111!important;
  border-color:rgba(255,255,255,.14)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.36)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.language-option{
  color:rgba(255,255,255,.82)!important;
}

.language-option:hover,
.language-option.is-active{
  color:#fff!important;
  background:rgba(255,255,255,.10)!important;
}

/* Mobile */
@media(max-width:900px){
  .site-header.is-scrolled,
  header.site-header.is-scrolled,
  header.topbar.is-scrolled,
  .topbar.is-scrolled,
  header.is-scrolled{
    background:
      linear-gradient(
        90deg,
        rgba(92,12,18,.96) 0%,
        rgba(13,13,13,.98) 34%,
        rgba(13,13,13,.98) 66%,
        rgba(0,63,35,.96) 100%
      )!important;
    -webkit-backdrop-filter:blur(8px) saturate(110%)!important;
    backdrop-filter:blur(8px) saturate(110%)!important;
  }
}


/* =========================================================
   Hide fixed header while horizontal portfolio is active
   ========================================================= */

.site-header,
header.site-header,
header.topbar,
.topbar{
  transition:
    transform .38s cubic-bezier(.22,.8,.2,1),
    opacity .28s ease,
    background .3s ease,
    box-shadow .3s ease!important;
  will-change:transform;
}

.site-header.hide-on-projects,
header.site-header.hide-on-projects,
header.topbar.hide-on-projects,
.topbar.hide-on-projects{
  transform:translateY(calc(-100% - 8px))!important;
  opacity:0!important;
  pointer-events:none!important;
}

/* Keep project section clear from any header overlap */
.work,
#work{
  scroll-margin-top:0!important;
}

@media(max-width:900px){
  .site-header.hide-on-projects,
  header.site-header.hide-on-projects,
  header.topbar.hide-on-projects,
  .topbar.hide-on-projects{
    transform:translateY(calc(-100% - 6px))!important;
  }
}


/* =========================================================
   Monochrome navigation and language dropdown
   White on dark states, black on light states.
   No colored text, glow, or blend effects.
   ========================================================= */

/* Remove all inherited tinting and effects */
.site-header *,
header.site-header *,
header.topbar *,
.topbar *,
.language-selector *,
.language-menu *{
  mix-blend-mode:normal!important;
  text-shadow:none!important;
  filter:none!important;
}

/* Default header over hero: crisp white */
.site-header nav a,
.site-header .nav a,
.site-header .mini-cta,
.site-header .header-cta,
.site-header .nav-cta,
.site-header .lang-toggle,
header.site-header nav a,
header.site-header .nav a,
header.site-header .mini-cta,
header.site-header .header-cta,
header.site-header .nav-cta,
header.site-header .lang-toggle,
header.topbar nav a,
header.topbar .nav a,
header.topbar .mini-cta,
header.topbar .header-cta,
header.topbar .nav-cta,
header.topbar .lang-toggle,
.topbar nav a,
.topbar .nav a,
.topbar .mini-cta,
.topbar .header-cta,
.topbar .nav-cta,
.topbar .lang-toggle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

/* Fixed/scrolled header: also crisp white */
.site-header.is-scrolled nav a,
.site-header.is-scrolled .nav a,
.site-header.is-scrolled .mini-cta,
.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .nav-cta,
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled nav a,
header.site-header.is-scrolled .nav a,
header.site-header.is-scrolled .mini-cta,
header.site-header.is-scrolled .header-cta,
header.site-header.is-scrolled .nav-cta,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled nav a,
header.topbar.is-scrolled .nav a,
header.topbar.is-scrolled .mini-cta,
header.topbar.is-scrolled .header-cta,
header.topbar.is-scrolled .nav-cta,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled nav a,
.topbar.is-scrolled .nav a,
.topbar.is-scrolled .mini-cta,
.topbar.is-scrolled .header-cta,
.topbar.is-scrolled .nav-cta,
.topbar.is-scrolled .lang-toggle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

/* Language button */
.lang-toggle{
  background:rgba(10,10,10,.18)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:none!important;
}

.lang-toggle:hover,
.lang-toggle:focus-visible,
.language-selector.is-open .lang-toggle{
  background:#111!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border-color:#fff!important;
  box-shadow:none!important;
}

/* Chevron */
.lang-chevron{
  stroke:#fff!important;
  color:#fff!important;
}

/* Dropdown: solid monochrome */
.language-menu{
  background:#111!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.28)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.language-option,
.language-option span,
.language-option small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

.language-option{
  background:transparent!important;
}

.language-option:hover,
.language-option.is-active{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.language-option:hover span,
.language-option:hover small,
.language-option.is-active span,
.language-option.is-active small{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* No colored active labels */
.language-option::before,
.language-option::after,
.lang-toggle::before,
.lang-toggle::after{
  display:none!important;
  content:none!important;
}

/* If the header ever switches to a light background, use black */
.site-header.is-light nav a,
.site-header.is-light .nav a,
.site-header.is-light .mini-cta,
.site-header.is-light .header-cta,
.site-header.is-light .nav-cta,
.site-header.is-light .lang-toggle,
header.is-light nav a,
header.is-light .nav a,
header.is-light .mini-cta,
header.is-light .header-cta,
header.is-light .nav-cta,
header.is-light .lang-toggle{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.site-header.is-light .lang-toggle,
header.is-light .lang-toggle{
  background:rgba(255,255,255,.72)!important;
  border-color:rgba(17,17,17,.7)!important;
}

.site-header.is-light .lang-chevron,
header.is-light .lang-chevron{
  stroke:#111!important;
}

/* Keep logo clean */
.site-header .brand img,
header.site-header .brand img,
header.topbar .brand img,
.topbar .brand img{
  opacity:1!important;
  mix-blend-mode:normal!important;
  filter:none!important;
}


/* =========================================================
   FINAL FIXED NAVBAR COLOR LOCK
   The scrolled header never inherits colors from page content.
   ========================================================= */

/* Dark, controlled background while fixed/scrolled */
.site-header.is-scrolled,
header.site-header.is-scrolled,
header.topbar.is-scrolled,
.topbar.is-scrolled,
header.is-scrolled{
  background:
    linear-gradient(
      90deg,
      rgba(88,10,16,.88) 0%,
      rgba(12,12,12,.96) 24%,
      rgba(12,12,12,.96) 76%,
      rgba(0,58,32,.88) 100%
    )!important;
  background-color:#0c0c0c!important;
  background-blend-mode:normal!important;
  -webkit-backdrop-filter:blur(12px) saturate(115%)!important;
  backdrop-filter:blur(12px) saturate(115%)!important;
  border-bottom:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 8px 28px rgba(0,0,0,.30)!important;
  color:#fff!important;
  isolation:isolate!important;
}

/* Remove any fog, gradient text layers or color overlays */
.site-header.is-scrolled::before,
.site-header.is-scrolled::after,
header.site-header.is-scrolled::before,
header.site-header.is-scrolled::after,
header.topbar.is-scrolled::before,
header.topbar.is-scrolled::after,
.topbar.is-scrolled::before,
.topbar.is-scrolled::after,
header.is-scrolled::before,
header.is-scrolled::after{
  display:none!important;
  content:none!important;
}

/* Lock every visible navbar element to solid white */
.site-header.is-scrolled a,
.site-header.is-scrolled button,
.site-header.is-scrolled span,
.site-header.is-scrolled small,
.site-header.is-scrolled svg,
header.site-header.is-scrolled a,
header.site-header.is-scrolled button,
header.site-header.is-scrolled span,
header.site-header.is-scrolled small,
header.site-header.is-scrolled svg,
header.topbar.is-scrolled a,
header.topbar.is-scrolled button,
header.topbar.is-scrolled span,
header.topbar.is-scrolled small,
header.topbar.is-scrolled svg,
.topbar.is-scrolled a,
.topbar.is-scrolled button,
.topbar.is-scrolled span,
.topbar.is-scrolled small,
.topbar.is-scrolled svg,
header.is-scrolled a,
header.is-scrolled button,
header.is-scrolled span,
header.is-scrolled small,
header.is-scrolled svg{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
  background-image:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
}

/* Logo stays the white version with no blending */
.site-header.is-scrolled .brand img,
header.site-header.is-scrolled .brand img,
header.topbar.is-scrolled .brand img,
.topbar.is-scrolled .brand img,
header.is-scrolled .brand img{
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

/* Clean white language selector */
.site-header.is-scrolled .lang-toggle,
header.site-header.is-scrolled .lang-toggle,
header.topbar.is-scrolled .lang-toggle,
.topbar.is-scrolled .lang-toggle,
header.is-scrolled .lang-toggle{
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  border:1px solid rgba(255,255,255,.62)!important;
  box-shadow:none!important;
}

.site-header.is-scrolled .lang-toggle:hover,
header.site-header.is-scrolled .lang-toggle:hover,
header.topbar.is-scrolled .lang-toggle:hover,
.topbar.is-scrolled .lang-toggle:hover,
header.is-scrolled .lang-toggle:hover,
.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.site-header.is-scrolled .language-selector.is-open .lang-toggle,
header.topbar.is-scrolled .language-selector.is-open .lang-toggle,
.topbar.is-scrolled .language-selector.is-open .lang-toggle{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  border-color:#fff!important;
}

/* Ensure hover text remains monochrome */
.site-header.is-scrolled nav a:hover,
header.site-header.is-scrolled nav a:hover,
header.topbar.is-scrolled nav a:hover,
.topbar.is-scrolled nav a:hover,
header.is-scrolled nav a:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

/* Dropdown remains strict black and white */
.language-menu{
  background:#111!important;
  border:1px solid rgba(255,255,255,.14)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.language-option,
.language-option span,
.language-option small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.language-option:hover,
.language-option.is-active{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.language-option:hover span,
.language-option:hover small,
.language-option.is-active span,
.language-option.is-active small{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Mobile */
@media(max-width:900px){
  .site-header.is-scrolled,
  header.site-header.is-scrolled,
  header.topbar.is-scrolled,
  .topbar.is-scrolled,
  header.is-scrolled{
    background:
      linear-gradient(
        90deg,
        rgba(88,10,16,.94) 0%,
        rgba(10,10,10,.98) 30%,
        rgba(10,10,10,.98) 70%,
        rgba(0,58,32,.94) 100%
      )!important;
    -webkit-backdrop-filter:blur(10px) saturate(110%)!important;
    backdrop-filter:blur(10px) saturate(110%)!important;
  }
}


/* =========================================================
   FINAL LANGUAGE SELECTOR REBUILD
   Compact EN/FR dropdown with strict monochrome contrast.
   ========================================================= */

.language-selector{
  position:relative!important;
  z-index:9999!important;
  display:inline-flex!important;
  align-items:center!important;
}

/* Compact trigger */
.language-selector .lang-toggle{
  width:auto!important;
  min-width:76px!important;
  height:44px!important;
  min-height:44px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border-radius:999px!important;
  background:rgba(10,10,10,.34)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  overflow:hidden!important;
}

.language-selector .lang-current{
  display:inline-block!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:14px!important;
  font-weight:650!important;
  letter-spacing:.06em!important;
  line-height:1!important;
}

.language-selector .lang-chevron{
  display:block!important;
  width:10px!important;
  height:7px!important;
  color:#fff!important;
  stroke:#fff!important;
  opacity:1!important;
}

.language-selector .lang-toggle:hover,
.language-selector .lang-toggle:focus-visible,
.language-selector.is-open .lang-toggle{
  background:#111!important;
  border-color:#fff!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:none!important;
}

/* Dropdown panel */
.language-selector .language-menu{
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:50%!important;
  width:190px!important;
  padding:8px!important;
  border-radius:16px!important;
  background:#111!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  transform:translate(-50%,-7px) scale(.98)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

.language-selector.is-open .language-menu{
  transform:translate(-50%,0) scale(1)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}

/* Every option remains readable */
.language-selector .language-option{
  width:100%!important;
  min-height:48px!important;
  padding:8px 12px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:38px 1fr!important;
  align-items:center!important;
  gap:10px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:left!important;
  opacity:1!important;
  visibility:visible!important;
}

.language-selector .language-option + .language-option{
  margin-top:4px!important;
}

.language-selector .language-option span,
.language-selector .language-option small{
  display:block!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  visibility:visible!important;
  background:none!important;
}

.language-selector .language-option span{
  font-size:13px!important;
  font-weight:750!important;
  letter-spacing:.06em!important;
}

.language-selector .language-option small{
  font-size:14px!important;
  font-weight:500!important;
}

/* Active and hover states: white row with black text */
.language-selector .language-option:hover,
.language-selector .language-option.is-active{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.language-selector .language-option:hover span,
.language-selector .language-option:hover small,
.language-selector .language-option.is-active span,
.language-selector .language-option.is-active small{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Prevent global scrolled-header rules from recoloring dropdown contents */
.site-header.is-scrolled .language-menu .language-option,
.site-header.is-scrolled .language-menu .language-option span,
.site-header.is-scrolled .language-menu .language-option small,
header.site-header.is-scrolled .language-menu .language-option,
header.site-header.is-scrolled .language-menu .language-option span,
header.site-header.is-scrolled .language-menu .language-option small,
.topbar.is-scrolled .language-menu .language-option,
.topbar.is-scrolled .language-menu .language-option span,
.topbar.is-scrolled .language-menu .language-option small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.site-header.is-scrolled .language-menu .language-option:hover,
.site-header.is-scrolled .language-menu .language-option.is-active,
header.site-header.is-scrolled .language-menu .language-option:hover,
header.site-header.is-scrolled .language-menu .language-option.is-active,
.topbar.is-scrolled .language-menu .language-option:hover,
.topbar.is-scrolled .language-menu .language-option.is-active{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.site-header.is-scrolled .language-menu .language-option:hover span,
.site-header.is-scrolled .language-menu .language-option:hover small,
.site-header.is-scrolled .language-menu .language-option.is-active span,
.site-header.is-scrolled .language-menu .language-option.is-active small,
header.site-header.is-scrolled .language-menu .language-option:hover span,
header.site-header.is-scrolled .language-menu .language-option:hover small,
header.site-header.is-scrolled .language-menu .language-option.is-active span,
header.site-header.is-scrolled .language-menu .language-option.is-active small,
.topbar.is-scrolled .language-menu .language-option:hover span,
.topbar.is-scrolled .language-menu .language-option:hover small,
.topbar.is-scrolled .language-menu .language-option.is-active span,
.topbar.is-scrolled .language-menu .language-option.is-active small{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Hide custom star cursor while interacting with language controls */
body:has(.language-selector:hover) .cursor,
body:has(.language-selector:focus-within) .cursor{
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:900px){
  .language-selector .language-menu{
    position:fixed!important;
    top:76px!important;
    left:50%!important;
    width:min(260px,calc(100vw - 32px))!important;
  }

  .language-selector .lang-toggle{
    min-width:68px!important;
    height:42px!important;
    min-height:42px!important;
    padding:0 13px!important;
  }
}


/* =========================================================
   LANGUAGE SELECTOR — CLICK ONLY
   It never opens or changes appearance from scrolling/hover.
   ========================================================= */

.language-selector{
  position:relative!important;
  z-index:9999!important;
}

/* Identical appearance at the top and while scrolling */
.language-selector .lang-toggle,
.site-header.is-scrolled .language-selector .lang-toggle,
header.site-header.is-scrolled .language-selector .lang-toggle,
header.topbar.is-scrolled .language-selector .lang-toggle,
.topbar.is-scrolled .language-selector .lang-toggle,
header.is-scrolled .language-selector .lang-toggle{
  min-width:74px!important;
  height:44px!important;
  padding:0 15px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  border-radius:999px!important;
  background:#111!important;
  border:1px solid rgba(255,255,255,.72)!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  mix-blend-mode:normal!important;
  text-shadow:none!important;
}

.language-selector .lang-toggle:hover,
.language-selector .lang-toggle:focus-visible,
.language-selector.is-open .lang-toggle,
.site-header.is-scrolled .language-selector .lang-toggle:hover,
header.site-header.is-scrolled .language-selector .lang-toggle:hover,
header.topbar.is-scrolled .language-selector .lang-toggle:hover,
.topbar.is-scrolled .language-selector .lang-toggle:hover{
  background:#111!important;
  border-color:#fff!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  transform:none!important;
  box-shadow:none!important;
}

.language-selector .lang-current{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

.language-selector .lang-chevron{
  color:#fff!important;
  stroke:#fff!important;
  opacity:1!important;
}

/* Fully hidden unless JavaScript adds .is-open after a direct click */
.language-selector .language-menu{
  display:none!important;
  position:absolute!important;
  top:calc(100% + 10px)!important;
  left:50%!important;
  width:188px!important;
  padding:8px!important;
  border-radius:15px!important;
  background:#111!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 42px rgba(0,0,0,.32)!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

.language-selector.is-open .language-menu{
  display:block!important;
}

/* Strict black-and-white options */
.language-selector .language-option{
  width:100%!important;
  min-height:48px!important;
  display:grid!important;
  grid-template-columns:38px 1fr!important;
  align-items:center!important;
  gap:10px!important;
  padding:8px 12px!important;
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  text-align:left!important;
  opacity:1!important;
}

.language-selector .language-option + .language-option{
  margin-top:4px!important;
}

.language-selector .language-option span,
.language-selector .language-option small{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}

.language-selector .language-option:hover,
.language-selector .language-option.is-active{
  background:#fff!important;
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

.language-selector .language-option:hover span,
.language-selector .language-option:hover small,
.language-selector .language-option.is-active span,
.language-selector .language-option.is-active small{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* Keep the custom star away from the control */
body:has(.language-selector:hover) .cursor,
body:has(.language-selector:focus-within) .cursor{
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:900px){
  .language-selector .language-menu{
    position:fixed!important;
    top:76px!important;
    left:50%!important;
    width:min(250px,calc(100vw - 32px))!important;
  }
}


/* =========================================================
   EN / FR inline language selector
   No dropdown. Clicking a language reloads the site.
   ========================================================= */

.language-inline{
  position:relative;
  z-index:160;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:9px!important;
  min-height:42px;
  padding:0 14px;
  border:1px solid rgba(255,255,255,.58);
  border-radius:999px;
  background:rgba(12,12,12,.20);
  color:#fff;
  white-space:nowrap;
  mix-blend-mode:normal!important;
}

.language-choice{
  appearance:none;
  border:0!important;
  outline:0;
  padding:0!important;
  margin:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.58)!important;
  -webkit-text-fill-color:rgba(255,255,255,.58)!important;
  font:inherit;
  font-size:13px!important;
  font-weight:650!important;
  line-height:1!important;
  letter-spacing:.08em!important;
  cursor:pointer;
  opacity:1!important;
  text-shadow:none!important;
  mix-blend-mode:normal!important;
  transition:color .18s ease, opacity .18s ease;
}

.language-choice:hover,
.language-choice:focus-visible,
.language-choice.is-active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

.language-choice.is-active{
  font-weight:800!important;
}

.language-divider{
  display:inline-block!important;
  color:rgba(255,255,255,.32)!important;
  -webkit-text-fill-color:rgba(255,255,255,.32)!important;
  font-size:13px;
  line-height:1;
  pointer-events:none;
}

/* Keep the selector identical in the fixed/scrolled navbar. */
.site-header.is-scrolled .language-inline,
header.site-header.is-scrolled .language-inline,
header.topbar.is-scrolled .language-inline,
.topbar.is-scrolled .language-inline,
header.is-scrolled .language-inline{
  background:rgba(255,255,255,.05)!important;
  border-color:rgba(255,255,255,.58)!important;
  color:#fff!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

.site-header.is-scrolled .language-choice,
header.site-header.is-scrolled .language-choice,
header.topbar.is-scrolled .language-choice,
.topbar.is-scrolled .language-choice,
header.is-scrolled .language-choice{
  color:rgba(255,255,255,.58)!important;
  -webkit-text-fill-color:rgba(255,255,255,.58)!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
}

.site-header.is-scrolled .language-choice:hover,
.site-header.is-scrolled .language-choice:focus-visible,
.site-header.is-scrolled .language-choice.is-active,
header.site-header.is-scrolled .language-choice:hover,
header.site-header.is-scrolled .language-choice:focus-visible,
header.site-header.is-scrolled .language-choice.is-active,
header.topbar.is-scrolled .language-choice:hover,
header.topbar.is-scrolled .language-choice:focus-visible,
header.topbar.is-scrolled .language-choice.is-active,
.topbar.is-scrolled .language-choice:hover,
.topbar.is-scrolled .language-choice:focus-visible,
.topbar.is-scrolled .language-choice.is-active,
header.is-scrolled .language-choice:hover,
header.is-scrolled .language-choice:focus-visible,
header.is-scrolled .language-choice.is-active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Hide the custom star cursor while hovering the language selector. */
body:has(.language-inline:hover) .cursor,
body:has(.language-inline:focus-within) .cursor{
  opacity:0!important;
  visibility:hidden!important;
}

@media(max-width:900px){
  .language-inline{
    min-height:40px;
    padding:0 12px;
    gap:8px!important;
  }

  .language-choice,
  .language-divider{
    font-size:12px!important;
  }
}


/* =========================================================
   FINAL HEADER MONOCHROME LOCK
   Top state: every header element is black.
   Scrolled state: every header element is white.
   No background-derived coloring or blend effects.
   ========================================================= */

/* Disable all blending/effects across the header */
.site-header,
header.site-header,
header.topbar,
.topbar,
.site-header *,
header.site-header *,
header.topbar *,
.topbar *{
  mix-blend-mode:normal!important;
  background-clip:border-box!important;
  -webkit-background-clip:border-box!important;
  text-shadow:none!important;
}

/* ---------------------------------------------------------
   TOP / UNSCROLLED STATE — ALL BLACK
   --------------------------------------------------------- */

.site-header:not(.is-scrolled) nav a,
.site-header:not(.is-scrolled) .nav a,
.site-header:not(.is-scrolled) .mini-cta,
.site-header:not(.is-scrolled) .header-cta,
.site-header:not(.is-scrolled) .nav-cta,
.site-header:not(.is-scrolled) .language-choice,
.site-header:not(.is-scrolled) .language-divider,
header.site-header:not(.is-scrolled) nav a,
header.site-header:not(.is-scrolled) .nav a,
header.site-header:not(.is-scrolled) .mini-cta,
header.site-header:not(.is-scrolled) .header-cta,
header.site-header:not(.is-scrolled) .nav-cta,
header.site-header:not(.is-scrolled) .language-choice,
header.site-header:not(.is-scrolled) .language-divider,
header.topbar:not(.is-scrolled) nav a,
header.topbar:not(.is-scrolled) .nav a,
header.topbar:not(.is-scrolled) .mini-cta,
header.topbar:not(.is-scrolled) .header-cta,
header.topbar:not(.is-scrolled) .nav-cta,
header.topbar:not(.is-scrolled) .language-choice,
header.topbar:not(.is-scrolled) .language-divider,
.topbar:not(.is-scrolled) nav a,
.topbar:not(.is-scrolled) .nav a,
.topbar:not(.is-scrolled) .mini-cta,
.topbar:not(.is-scrolled) .header-cta,
.topbar:not(.is-scrolled) .nav-cta,
.topbar:not(.is-scrolled) .language-choice,
.topbar:not(.is-scrolled) .language-divider{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  opacity:1!important;
  filter:none!important;
}

/* Active language remains black but stronger */
.site-header:not(.is-scrolled) .language-choice.is-active,
header.site-header:not(.is-scrolled) .language-choice.is-active,
header.topbar:not(.is-scrolled) .language-choice.is-active,
.topbar:not(.is-scrolled) .language-choice.is-active{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
  font-weight:800!important;
}

/* Top-state language capsule */
.site-header:not(.is-scrolled) .language-inline,
header.site-header:not(.is-scrolled) .language-inline,
header.topbar:not(.is-scrolled) .language-inline,
.topbar:not(.is-scrolled) .language-inline{
  background:rgba(255,255,255,.40)!important;
  border:1px solid rgba(17,17,17,.66)!important;
  color:#111!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Top-state logo forced to black */
.site-header:not(.is-scrolled) .brand img,
header.site-header:not(.is-scrolled) .brand img,
header.topbar:not(.is-scrolled) .brand img,
.topbar:not(.is-scrolled) .brand img{
  filter:brightness(0)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* Hover remains black — no colored hover */
.site-header:not(.is-scrolled) nav a:hover,
.site-header:not(.is-scrolled) .nav a:hover,
.site-header:not(.is-scrolled) .mini-cta:hover,
.site-header:not(.is-scrolled) .header-cta:hover,
.site-header:not(.is-scrolled) .nav-cta:hover,
.site-header:not(.is-scrolled) .language-choice:hover,
header.site-header:not(.is-scrolled) nav a:hover,
header.site-header:not(.is-scrolled) .nav a:hover,
header.site-header:not(.is-scrolled) .mini-cta:hover,
header.site-header:not(.is-scrolled) .header-cta:hover,
header.site-header:not(.is-scrolled) .nav-cta:hover,
header.site-header:not(.is-scrolled) .language-choice:hover,
header.topbar:not(.is-scrolled) nav a:hover,
header.topbar:not(.is-scrolled) .nav a:hover,
header.topbar:not(.is-scrolled) .mini-cta:hover,
header.topbar:not(.is-scrolled) .header-cta:hover,
header.topbar:not(.is-scrolled) .nav-cta:hover,
header.topbar:not(.is-scrolled) .language-choice:hover,
.topbar:not(.is-scrolled) nav a:hover,
.topbar:not(.is-scrolled) .nav a:hover,
.topbar:not(.is-scrolled) .mini-cta:hover,
.topbar:not(.is-scrolled) .header-cta:hover,
.topbar:not(.is-scrolled) .nav-cta:hover,
.topbar:not(.is-scrolled) .language-choice:hover{
  color:#111!important;
  -webkit-text-fill-color:#111!important;
}

/* ---------------------------------------------------------
   SCROLLED / FIXED STATE — ALL WHITE
   --------------------------------------------------------- */

.site-header.is-scrolled nav a,
.site-header.is-scrolled .nav a,
.site-header.is-scrolled .mini-cta,
.site-header.is-scrolled .header-cta,
.site-header.is-scrolled .nav-cta,
.site-header.is-scrolled .language-choice,
.site-header.is-scrolled .language-divider,
header.site-header.is-scrolled nav a,
header.site-header.is-scrolled .nav a,
header.site-header.is-scrolled .mini-cta,
header.site-header.is-scrolled .header-cta,
header.site-header.is-scrolled .nav-cta,
header.site-header.is-scrolled .language-choice,
header.site-header.is-scrolled .language-divider,
header.topbar.is-scrolled nav a,
header.topbar.is-scrolled .nav a,
header.topbar.is-scrolled .mini-cta,
header.topbar.is-scrolled .header-cta,
header.topbar.is-scrolled .nav-cta,
header.topbar.is-scrolled .language-choice,
header.topbar.is-scrolled .language-divider,
.topbar.is-scrolled nav a,
.topbar.is-scrolled .nav a,
.topbar.is-scrolled .mini-cta,
.topbar.is-scrolled .header-cta,
.topbar.is-scrolled .nav-cta,
.topbar.is-scrolled .language-choice,
.topbar.is-scrolled .language-divider,
header.is-scrolled nav a,
header.is-scrolled .nav a,
header.is-scrolled .mini-cta,
header.is-scrolled .header-cta,
header.is-scrolled .nav-cta,
header.is-scrolled .language-choice,
header.is-scrolled .language-divider{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
}

/* Active language stays white and stronger */
.site-header.is-scrolled .language-choice.is-active,
header.site-header.is-scrolled .language-choice.is-active,
header.topbar.is-scrolled .language-choice.is-active,
.topbar.is-scrolled .language-choice.is-active,
header.is-scrolled .language-choice.is-active{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-weight:800!important;
}

/* Scrolled language capsule */
.site-header.is-scrolled .language-inline,
header.site-header.is-scrolled .language-inline,
header.topbar.is-scrolled .language-inline,
.topbar.is-scrolled .language-inline,
header.is-scrolled .language-inline{
  background:rgba(10,10,10,.42)!important;
  border:1px solid rgba(255,255,255,.62)!important;
  color:#fff!important;
  box-shadow:none!important;
}

/* Scrolled logo forced to white */
.site-header.is-scrolled .brand img,
header.site-header.is-scrolled .brand img,
header.topbar.is-scrolled .brand img,
.topbar.is-scrolled .brand img,
header.is-scrolled .brand img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* Scrolled hover remains white */
.site-header.is-scrolled nav a:hover,
.site-header.is-scrolled .nav a:hover,
.site-header.is-scrolled .mini-cta:hover,
.site-header.is-scrolled .header-cta:hover,
.site-header.is-scrolled .nav-cta:hover,
.site-header.is-scrolled .language-choice:hover,
header.site-header.is-scrolled nav a:hover,
header.site-header.is-scrolled .nav a:hover,
header.site-header.is-scrolled .mini-cta:hover,
header.site-header.is-scrolled .header-cta:hover,
header.site-header.is-scrolled .nav-cta:hover,
header.site-header.is-scrolled .language-choice:hover,
header.topbar.is-scrolled nav a:hover,
header.topbar.is-scrolled .nav a:hover,
header.topbar.is-scrolled .mini-cta:hover,
header.topbar.is-scrolled .header-cta:hover,
header.topbar.is-scrolled .nav-cta:hover,
header.topbar.is-scrolled .language-choice:hover,
.topbar.is-scrolled nav a:hover,
.topbar.is-scrolled .nav a:hover,
.topbar.is-scrolled .mini-cta:hover,
.topbar.is-scrolled .header-cta:hover,
.topbar.is-scrolled .nav-cta:hover,
.topbar.is-scrolled .language-choice:hover,
header.is-scrolled nav a:hover,
header.is-scrolled .nav a:hover,
header.is-scrolled .mini-cta:hover,
header.is-scrolled .header-cta:hover,
header.is-scrolled .nav-cta:hover,
header.is-scrolled .language-choice:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* Remove any pseudo-element color overlays from menu/CTA */
.site-header nav a::before,
.site-header nav a::after,
.site-header .mini-cta::before,
.site-header .mini-cta::after,
header.site-header nav a::before,
header.site-header nav a::after,
header.site-header .mini-cta::before,
header.site-header .mini-cta::after,
header.topbar nav a::before,
header.topbar nav a::after,
header.topbar .mini-cta::before,
header.topbar .mini-cta::after,
.topbar nav a::before,
.topbar nav a::after,
.topbar .mini-cta::before,
.topbar .mini-cta::after{
  background-image:none!important;
  color:inherit!important;
}

/* Custom star cursor never changes header element colors */
body:has(.topbar:hover) .cursor{
  mix-blend-mode:normal!important;
}


/* =========================================================
   HERO HEADER — WHITE ELEMENTS
   Sticky/scrolled header remains unchanged.
   ========================================================= */

/* Top / unscrolled header text */
.site-header:not(.is-scrolled) nav a,
.site-header:not(.is-scrolled) .nav a,
.site-header:not(.is-scrolled) .mini-cta,
.site-header:not(.is-scrolled) .header-cta,
.site-header:not(.is-scrolled) .nav-cta,
.site-header:not(.is-scrolled) .language-choice,
.site-header:not(.is-scrolled) .language-divider,
header.site-header:not(.is-scrolled) nav a,
header.site-header:not(.is-scrolled) .nav a,
header.site-header:not(.is-scrolled) .mini-cta,
header.site-header:not(.is-scrolled) .header-cta,
header.site-header:not(.is-scrolled) .nav-cta,
header.site-header:not(.is-scrolled) .language-choice,
header.site-header:not(.is-scrolled) .language-divider,
header.topbar:not(.is-scrolled) nav a,
header.topbar:not(.is-scrolled) .nav a,
header.topbar:not(.is-scrolled) .mini-cta,
header.topbar:not(.is-scrolled) .header-cta,
header.topbar:not(.is-scrolled) .nav-cta,
header.topbar:not(.is-scrolled) .language-choice,
header.topbar:not(.is-scrolled) .language-divider,
.topbar:not(.is-scrolled) nav a,
.topbar:not(.is-scrolled) .nav a,
.topbar:not(.is-scrolled) .mini-cta,
.topbar:not(.is-scrolled) .header-cta,
.topbar:not(.is-scrolled) .nav-cta,
.topbar:not(.is-scrolled) .language-choice,
.topbar:not(.is-scrolled) .language-divider{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  text-shadow:0 1px 12px rgba(0,0,0,.24)!important;
}

/* Top / unscrolled logo forced white */
.site-header:not(.is-scrolled) .brand img,
header.site-header:not(.is-scrolled) .brand img,
header.topbar:not(.is-scrolled) .brand img,
.topbar:not(.is-scrolled) .brand img{
  filter:brightness(0) invert(1)!important;
  opacity:1!important;
  mix-blend-mode:normal!important;
}

/* EN / FR capsule on hero */
.site-header:not(.is-scrolled) .language-inline,
header.site-header:not(.is-scrolled) .language-inline,
header.topbar:not(.is-scrolled) .language-inline,
.topbar:not(.is-scrolled) .language-inline{
  background:rgba(8,8,8,.18)!important;
  border:1px solid rgba(255,255,255,.68)!important;
  color:#fff!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}

/* Keep hover monochrome white */
.site-header:not(.is-scrolled) nav a:hover,
.site-header:not(.is-scrolled) .nav a:hover,
.site-header:not(.is-scrolled) .mini-cta:hover,
.site-header:not(.is-scrolled) .header-cta:hover,
.site-header:not(.is-scrolled) .nav-cta:hover,
.site-header:not(.is-scrolled) .language-choice:hover,
header.site-header:not(.is-scrolled) nav a:hover,
header.site-header:not(.is-scrolled) .nav a:hover,
header.site-header:not(.is-scrolled) .mini-cta:hover,
header.site-header:not(.is-scrolled) .header-cta:hover,
header.site-header:not(.is-scrolled) .nav-cta:hover,
header.site-header:not(.is-scrolled) .language-choice:hover,
header.topbar:not(.is-scrolled) nav a:hover,
header.topbar:not(.is-scrolled) .nav a:hover,
header.topbar:not(.is-scrolled) .mini-cta:hover,
header.topbar:not(.is-scrolled) .header-cta:hover,
header.topbar:not(.is-scrolled) .nav-cta:hover,
header.topbar:not(.is-scrolled) .language-choice:hover,
.topbar:not(.is-scrolled) nav a:hover,
.topbar:not(.is-scrolled) .nav a:hover,
.topbar:not(.is-scrolled) .mini-cta:hover,
.topbar:not(.is-scrolled) .header-cta:hover,
.topbar:not(.is-scrolled) .nav-cta:hover,
.topbar:not(.is-scrolled) .language-choice:hover{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}

/* =========================================================
   Meet the experts — final section, black background
   ========================================================= */
.experts{
  background:#000;
  color:#fff;
  padding:7vw var(--pad) 9vw;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.experts .kicker{color:#999}
.experts-title{
  font-size:clamp(34px,5.6vw,88px);
  line-height:1.06;
  letter-spacing:-.03em;
  text-transform:uppercase;
  font-weight:600;
  max-width:1150px;
  margin:18px 0 22px;
}
.experts-media{
  width:min(1160px,94%);
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 40px 80px rgba(0,0,0,.55);
}
.experts-media img{
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
}

@media(max-width:900px){
  .experts{padding:56px var(--pad) 56px}
  .experts-title{font-size:clamp(28px,7.6vw,42px);margin:12px 0 14px}
  .experts-media{width:100%;border-radius:0}
  .experts-media img{aspect-ratio:4/3;object-fit:cover;object-position:center top}
}
@media(max-width:520px){
  .experts-media img{aspect-ratio:1/1;object-position:center top}
}


/* Slightly smaller, tighter hero headline */
.hero h1{
  font-size:clamp(52px,7.8vw,132px)!important;
}

/* Contact form — sits inside the dark CTA section, below the mailto link */
.contact-form-wrap{
  position:relative;
  z-index:2;
  margin:56px 0 8px;
  max-width:100%;
}
.contact-form-wrap .kicker{color:#888;margin:0 0 18px}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.form-row{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.form-row label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  color:#999;
}
.form-row input,
.form-row textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff;
  font:16px/1.5 'DM Sans',Arial,sans-serif;
  padding:8px 0;
  resize:none;
  transition:border-color .25s ease;
}
.form-row input::placeholder,
.form-row textarea::placeholder{color:#666}
.form-row input:focus,
.form-row textarea:focus{
  outline:none;
  border-bottom-color:var(--morocco-green);
}
.form-hp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-submit{
  align-self:flex-start;
  margin-top:4px;
  padding:14px 30px;
  border-radius:999px;
  background:#fff;
  color:#0b0b0b;
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:transform .25s ease,background .25s ease,color .25s ease;
}
.form-submit:hover{
  transform:translateY(-2px);
  background:var(--morocco-green);
  color:#fff;
}
.form-submit:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}
.form-status{
  font-size:13px;
  color:#9adfc0;
  min-height:18px;
  margin:0;
}
.form-status.is-error{color:#ff9b9b}

@media(max-width:900px){
  .contact-form-wrap{margin:42px 0 4px;max-width:100%}
}

/* Tablet landscape (901-1180px): the portfolio rail is touch-first here too,
   so swap the desktop scroll-jacking track for a native swipeable strip
   instead of forcing the mouse-wheel-driven horizontal transform. */
@media(max-width:1180px){
  .work{min-height:auto}
  .horizontal-wrap{
    position:relative;
    height:auto;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    padding-bottom:50px;
  }
  .horizontal-track{transform:none!important}
  .project{scroll-snap-align:start}
}

/* Slightly larger tap targets for the language switcher on touch devices. */
@media(max-width:1180px){
  .language-choice{
    padding:10px 3px!important;
    min-height:38px;
    display:inline-flex!important;
    align-items:center!important;
  }
}

/* Sticky bottom navigation — mobile only, desktop is completely untouched. */
.mobile-bottom-nav{display:none}

@media(max-width:900px){
  .mobile-bottom-nav{
    display:flex;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9997;
    justify-content:space-between;
    gap:4px;
    background:rgba(9,9,9,.94);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    border-top:1px solid rgba(255,255,255,.12);
    padding:12px 10px calc(10px + env(safe-area-inset-bottom));
  }
  .mobile-nav-link{
    flex:1;
    text-align:center;
    color:rgba(255,255,255,.55);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.07em;
    font-weight:650;
    padding:6px 2px;
    position:relative;
    transition:color .2s ease;
  }
  .mobile-nav-link.is-active{color:#fff}
  .mobile-nav-link.is-active::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-4px;
    transform:translateX(-50%);
    width:16px;
    height:2px;
    border-radius:2px;
    background:linear-gradient(90deg,var(--morocco-red),var(--morocco-green));
  }

  /* Reserve space at the bottom of the page and lift the WhatsApp button
     so neither is hidden behind the new bar. */
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .whatsapp-float{bottom:calc(58px + 14px + env(safe-area-inset-bottom))}
}

@media(max-width:520px){
  .mobile-nav-link{font-size:10px;letter-spacing:.05em}
}

/* Services (pinned) section — the sticky scroll-jacking cycle is a
   desktop mouse-wheel pattern. Below 1100px it isn't actually pinned
   (see the max-width:900px override earlier), so the JS-driven
   opacity/active cycling just flickers with nothing holding it in
   view. Replace it with a clean static stacked list instead. */
@media(max-width:1100px){
  .pin-stage{
    position:static!important;
    height:auto!important;
    min-height:0!important;
    display:block!important;
    padding:44px var(--pad)!important;
  }
  .stage-visual{display:none!important}
  .service-card{
    position:static!important;
    opacity:1!important;
    transform:none!important;
    left:auto!important;
    right:auto!important;
    bottom:auto!important;
    padding:28px 0!important;
    border-top:1px solid rgba(255,255,255,.16)!important;
    transition:none!important;
  }
  .service-card:first-child{
    border-top:0!important;
    padding-top:0!important;
  }
}

/* Service card thumbnails — mobile/tablet only. ".service-card-head" is a
   new wrapper around the <h3>; on desktop it's display:contents so the
   <h3> still participates directly in .service-card's grid exactly as
   before (nothing changes above 1100px). The thumbnail itself is only
   ever shown inside the ≤1100px branch. */
.service-card-head{display:contents}
.service-card-thumb{display:none}

@media(max-width:1100px){
  .service-card-head{
    display:flex!important;
    align-items:center!important;
    gap:16px!important;
    margin-bottom:4px!important;
  }
  .service-card-thumb{
    display:block!important;
    width:72px!important;
    height:72px!important;
    border-radius:14px!important;
    object-fit:cover!important;
    flex:none!important;
    box-shadow:0 10px 22px rgba(0,0,0,.35)!important;
  }
  .service-card h3{
    font-size:clamp(22px,7.2vw,30px)!important;
    line-height:1.08!important;
    letter-spacing:-.02em!important;
    max-width:100%!important;
    margin:0!important;
  }
  /* Give every card the red/green accent underline, not just the one
     that happens to carry the .active class in the static markup. */
  .service-card h3::after{
    content:""!important;
    display:block!important;
    width:52px!important;
    height:3px!important;
    margin-top:10px!important;
    background:linear-gradient(90deg,var(--morocco-red),var(--morocco-green))!important;
  }
}

@media(max-width:520px){
  .service-card-thumb{
    width:60px!important;
    height:60px!important;
    border-radius:12px!important;
  }
  .service-card h3{
    font-size:clamp(20px,7.6vw,26px)!important;
  }
}

/* Tourism "exploded system" — the section inherited desktop's tall
   min-height (210vh) and layers height (720px/610px) meant to give the
   pinned scroll-jacking effect room to breathe. Mobile isn't pinned, so
   that extra height just became empty scroll distance. Trim it down
   while keeping the original pill design and JS-driven reveal intact. */
@media(max-width:900px){
  .exploded{min-height:112vh!important}
  .layers{height:440px!important}
}
@media(max-width:540px){
  .layers{height:380px!important}
}

/* Remove the dark backdrop box behind the footer text (mobile + desktop). */
.cta footer::before,
.cta .footer-row::before,
.cta .footer-meta::before{
  content:none!important;
  display:none!important;
}

/* The message textarea's own bottom border sat isolated in a lot of
   empty space below it (it's a tall, multi-row field), reading as a
   stray line. Drop it — the label alone is enough. */
.form-row textarea{
  border-bottom:none;
}
.form-row textarea:focus{
  border-bottom:none;
}