@font-face{font-family:"Schibsted Grotesk";src:url("/assets/fonts/schibsted-grotesk-latin.woff2") format("woff2");font-style:normal;font-weight:400 700;font-display:swap}
:root{color-scheme:dark;--black:#000000;--gold:#ffcc00;--paper:#eae4e6;--white:#f7f5f0;--muted:#aaa9a5;--line:#343530;--ease-out:cubic-bezier(.22,1,.36,1);font-family:"Schibsted Grotesk","Helvetica Neue",sans-serif;font-synthesis:none;font-kerning:normal}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--black);color:var(--white);font-size:1rem;line-height:1.6}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,figure{margin:0}
h1,h2,h3{text-wrap:balance;font-weight:500}
p{text-wrap:pretty}
::selection{background:var(--gold);color:var(--black)}
:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.section-light :focus-visible,.method :focus-visible{outline-color:var(--black)}
.wrap{width:min(100% - 40px,1360px);margin-inline:auto}
.skip-link{position:absolute;z-index:20;left:20px;top:12px;padding:12px 20px;background:var(--gold);color:var(--black);transform:translateY(-160%)}
.skip-link:focus{transform:translateY(0)}

/* Navigation stays light, with a native disclosure on small screens. */
.site-header{min-height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px;position:relative;z-index:5}
.brand{display:inline-flex;gap:5px;align-items:center;flex-shrink:0;font-size:1.5rem;font-weight:600;letter-spacing:-.06em;line-height:1}
.brand img{width:48px;height:48px;object-fit:contain}
.brand-dot{color:var(--gold)}
.desktop-nav,.header-contact{display:none}
.mobile-menu summary{list-style:none;display:flex;gap:12px;align-items:center;min-height:44px;cursor:pointer;font-size:.875rem}
.mobile-menu summary::-webkit-details-marker{display:none}
.menu-sign,.expertise-sign{display:block;position:relative;width:16px;height:16px;flex-shrink:0}
.menu-sign::before,.menu-sign::after,.expertise-sign::before,.expertise-sign::after{content:"";position:absolute;background:currentColor}
.menu-sign::before,.expertise-sign::before{top:7px;left:0;width:16px;height:1px}
.menu-sign::after,.expertise-sign::after{top:0;left:7px;width:1px;height:16px;transition:transform 200ms var(--ease-out)}
.mobile-menu[open] .menu-sign::after,.expertise[open] .expertise-sign::after{transform:rotate(90deg)}
.mobile-menu nav{position:absolute;left:0;right:0;top:100%;background:var(--black);border-block:1px solid var(--line);padding:16px 0 24px;display:flex;flex-direction:column;gap:4px;box-shadow:0 24px 32px #00000066}
.mobile-menu nav a{padding:12px 20px;font-size:1.125rem}
.mobile-menu nav a:last-child{color:var(--gold)}

/* A single, large dome carries the visual identity of the opening. */
.hero{padding-block:44px 40px;display:grid;gap:8px}
.hero-intro{font-size:.8125rem;letter-spacing:.08em;margin-bottom:28px}
.hero h1{font-size:clamp(3rem,9vw + .5rem,7.25rem);line-height:.99;letter-spacing:-.065em;font-weight:600}
.hero-line{display:block;overflow:clip;padding-block:.06em;margin-block:-.06em}
.hero-line>span{display:block}
.hero h1 .hero-line-gold{color:var(--gold)}
.hero-promise{font-size:clamp(1.25rem,2.2vw,1.75rem);margin-top:24px;letter-spacing:-.025em}
.hero-description{max-width:43ch;color:var(--muted);line-height:1.75;margin-top:12px}
.hero-actions{display:flex;align-items:flex-start;flex-direction:column;gap:16px;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;min-height:54px;padding:14px 20px;font-size:.875rem;font-weight:500;line-height:1.4;transition:background 180ms var(--ease-out),transform 180ms var(--ease-out)}
.button-gold{background:var(--gold);color:var(--black)}
.text-link{display:inline-flex;align-items:center;gap:18px;min-height:44px;font-size:.875rem}
.hero-visual{min-width:0;position:relative;margin-top:10px}
.signature-strip{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-block:24px 32px;border-top:1px solid var(--line)}
.signature-strip p{font-size:.875rem;line-height:1.45;letter-spacing:-.01em}
.signature-strip a{display:flex;align-items:center;gap:24px;min-height:44px;font-size:.75rem;color:var(--muted)}

.section-light{background:var(--paper);color:var(--black);color-scheme:light}
.section-index{font-size:.8125rem;margin-bottom:32px}
.approach{padding-block:72px 36px}
.approach-grid{display:grid;gap:40px}
.approach h2{font-size:clamp(4.5rem,10vw,8rem);line-height:.95;letter-spacing:-.075em}
.gold-period{color:var(--black)}
.lead{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.35;letter-spacing:-.03em}
.approach-copy>p+p{margin-top:20px}
.approach-copy>p:not(.lead):not(.approach-closing){max-width:47ch}
.approach-copy .approach-closing{margin-top:32px;font-size:1.25rem;line-height:1.4;letter-spacing:-.025em}
.approach-dimensions{display:flex;flex-wrap:wrap;column-gap:24px;row-gap:16px;border-top:1px solid #00000033;padding-top:24px;font-size:.8125rem}

.expertises{padding-block:76px 80px}
.section-heading{display:grid;gap:24px;margin-bottom:40px}
.section-heading h2,.agency h2{font-size:clamp(2rem,4vw,3.75rem);line-height:1.12;letter-spacing:-.055em}
.section-heading>p{color:var(--muted);font-size:.875rem}
.expertise{border-top:1px solid var(--line)}
.expertise:last-child{border-bottom:1px solid var(--line)}
.expertise summary{display:grid;grid-template-columns:24px 1fr 16px;align-items:center;gap:12px;min-height:104px;padding-block:24px;list-style:none;cursor:pointer}
.expertise summary::-webkit-details-marker{display:none}
.expertise-number{color:var(--muted);align-self:start;padding-top:5px;font-size:.75rem}
.expertise h3{font-size:clamp(1.375rem,3vw,2.75rem);line-height:1.2;letter-spacing:-.045em}
.expertise[open] summary{color:var(--gold)}
.expertise-content{display:grid;gap:24px;padding:0 28px 36px 36px}
.expertise-content>p{font-size:1.25rem;line-height:1.4;max-width:22ch;letter-spacing:-.025em}
.expertise-content>div>p{max-width:46ch;color:var(--muted);line-height:1.75}
.expertise-content ul{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:20px 0 0;list-style:none;font-size:.75rem;color:#c2c1bc}
.expertise-content li{border-bottom:1px solid var(--line);padding-bottom:4px}

.references{padding-block:64px 72px;background:#fff;--reference-width:144px;--reference-gap:40px}
.references-heading{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;margin-bottom:40px}
.references h2{font-size:clamp(2rem,4vw,3.75rem);line-height:1.12;letter-spacing:-.055em}
.reference-toggle{flex-shrink:0;min-height:44px;padding:10px 0;border:0;border-bottom:1px solid #00000055;background:transparent;color:inherit;font-size:.75rem;cursor:pointer}
.reference-toggle[hidden]{display:none}
.reference-window{overflow:hidden;padding-block:16px}
.reference-logos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px;list-style:none;padding:0;margin:0}
.reference-logos li{display:flex;align-items:center;justify-content:center;min-width:0;height:100px}
.reference-logos img{width:100%;height:74px;max-width:180px;object-fit:contain}
.reference-logos .reference-logo-europe{max-width:116px}
.reference-logos .reference-logo-youth{max-width:136px}
.reference-logos .reference-logo-light{filter:brightness(0)}
.reference-logos .reference-logo-maghroumin{height:130px;max-width:160px}
.reference-logos .reference-logo-esprit{height:70px;max-width:162px}
.reference-logos[aria-hidden="true"]{display:none}
@media(prefers-reduced-motion:no-preference){
  .references.is-ready .reference-track{display:flex;width:max-content;animation:reference-drift 42s linear infinite}
  .references.is-ready .reference-logos{display:flex;flex:none;align-items:center;gap:var(--reference-gap);padding-inline-end:var(--reference-gap)}
  .references.is-ready .reference-logos li{flex:0 0 var(--reference-width);width:var(--reference-width)}
  .references.is-ready.is-paused .reference-track,.references.is-ready.is-suspended .reference-track,.references.is-ready .reference-window:focus-within .reference-track{animation-play-state:paused}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .references.is-ready .reference-window:hover .reference-track{animation-play-state:paused}
}
@media(prefers-reduced-motion:reduce){
  .references .reference-toggle{display:none}
}
@keyframes reference-drift{to{transform:translateX(-50%)}}

.method{background:var(--gold);color:var(--black);padding-block:64px 56px;color-scheme:light}
.method-heading{display:grid;gap:28px}
.method-heading>p{max-width:25ch;font-size:.875rem}
.method h2{font-size:clamp(2.5rem,5.5vw,5rem);line-height:1.05;letter-spacing:-.06em}
.method-steps{list-style:none;display:grid;gap:32px;margin:48px 0 0;padding:0}
.method-steps li{border-top:1px solid #00000055;padding-top:16px}
.step-number{display:block;font-size:.75rem;margin-bottom:28px}
.method-steps h3{font-size:1.5rem;letter-spacing:-.04em;margin-bottom:8px;line-height:1.2}
.method-steps p{font-size:.875rem;max-width:22ch}

.agency{padding-block:76px 56px}
.agency-grid{display:grid;gap:40px}
.agency-copy>p+p{margin-top:24px;max-width:48ch}
.agency-copy .text-link{margin-top:24px;border-bottom:1px solid #00000066}
.agency-statement{border-top:1px solid #00000033;padding-top:36px;margin-top:4px;font-size:clamp(2.25rem,7vw,6.5rem);font-weight:500;line-height:1.04;letter-spacing:-.06em}
.agency-statement span{color:#696565}

.contact{padding-block:80px 64px}
.contact h2{font-size:clamp(2.5rem,7.8vw,7.5rem);line-height:1.04;letter-spacing:-.06em}
.contact h2>span{color:var(--gold)}
.contact-bottom{display:grid;gap:28px;margin-top:36px}
.contact-bottom>p{color:var(--muted);font-size:.875rem}
.contact-grid{display:grid;gap:48px;margin-top:40px}
.contact-direct>p{color:var(--muted);font-size:1rem;line-height:1.7;margin-bottom:24px}
.contact-direct .contact-email{font-size:clamp(1rem,2.2vw,1.75rem)}
.contact-phone{display:block;width:fit-content;min-height:44px;margin-top:20px;font-size:1.25rem;letter-spacing:-.025em}
.contact-phone:hover{color:var(--gold)}
.contact-form{display:grid;grid-template-columns:1fr;gap:20px 24px;min-width:0}
.contact-form[hidden]{display:none}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field label{font-size:.875rem}
.field label span{color:var(--muted);font-size:.75rem}
.field input,.field textarea{width:100%;min-width:0;max-width:100%;border:1px solid #55564f;border-radius:0;background:#10110f;color:var(--white);padding:12px 14px;font:inherit;font-size:1rem;line-height:1.5}
.field textarea{resize:vertical;min-height:140px}
.field [aria-invalid="true"]{border-color:#f8aa9c}
.field-error{font-size:.75rem;line-height:1.5;color:#f8aa9c;min-height:0}
.field-error:empty{display:none}
.contact-submit{border:0;cursor:pointer;font:inherit;font-size:.875rem}
.contact-submit:disabled{cursor:wait;opacity:.65}
.form-status{font-size:.875rem;line-height:1.6;margin-top:16px;max-width:48ch}
.form-status:empty{margin-top:0}
.form-status.is-error{color:#f8aa9c}
.form-status.is-success{color:var(--gold)}
.form-privacy{font-size:.75rem;color:var(--muted);line-height:1.7;margin-top:16px;max-width:48ch}
.form-privacy a{text-decoration:underline;text-underline-offset:3px}
.contact-honeypot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.contact-email{display:inline-flex;justify-content:space-between;align-items:center;gap:12px;width:fit-content;max-width:100%;font-size:clamp(1rem,2.4vw,2rem);letter-spacing:-.035em;border-bottom:1px solid var(--gold);padding-block:10px;color:var(--gold);overflow-wrap:anywhere}
.site-footer{border-top:1px solid var(--line)}
.footer-main{display:grid;grid-template-columns:1fr;gap:20px;align-items:center;padding-block:32px}
.footer-main>p{grid-column:1;color:var(--muted);font-size:.8125rem;line-height:1.5}
.back-top{grid-column:1;min-height:44px;display:inline-flex;align-items:center;gap:16px;color:var(--muted);font-size:.75rem;justify-self:start}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 20px;align-items:center;border-top:1px solid var(--line);padding-block:20px;font-size:.75rem;color:var(--muted)}
.footer-socials{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer-legal a{min-height:44px;display:inline-flex;align-items:center}

@media(hover:hover){
  .desktop-nav a:hover,.header-contact:hover,.text-link:hover,.back-top:hover,.footer-legal a:hover{color:var(--gold)}
  .text-link-dark:hover{color:var(--black)}
  .button-gold:hover{background:#ffdc4d;transform:translateY(-2px)}
  .contact-email:hover{color:var(--white)}
  .expertise summary:hover h3{color:var(--gold)}
}
@media(min-width:560px){
  .wrap{width:min(100% - 64px,1360px)}
  .hero-actions{flex-direction:row;gap:24px;align-items:center}
  .signature-break{display:none}
  .method-steps{grid-template-columns:repeat(2,1fr);gap:40px 32px}
  .reference-logos{grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 32px}
  .contact-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .contact-form .field-wide{grid-column:1/-1}
  .expertise summary{grid-template-columns:36px 1fr 16px;gap:20px}
  .expertise-content{padding-left:56px}
  .footer-main{grid-template-columns:1fr 1fr auto}
  .footer-main>p{grid-column:2}
  .back-top{grid-column:3;grid-row:auto}
}
@media(min-width:900px){
  .site-header{min-height:116px}
  .brand{font-size:1.75rem;gap:8px}
  .brand img{width:56px;height:56px}
  .desktop-nav{display:flex;align-items:center;gap:28px;font-size:.8125rem}
  .desktop-nav a{display:inline-flex;align-items:center;min-height:44px}
  .header-contact{display:inline-flex;gap:24px;align-items:center;min-height:44px;font-size:.8125rem}
  .mobile-menu{display:none}
  .hero{grid-template-columns:1.15fr 1fr;gap:0;align-items:center;padding-block:32px 48px}
  .hero-intro{margin-bottom:32px}
  .hero h1{font-size:clamp(5.5rem,7.8vw,7.25rem)}
  .hero-promise{margin-top:28px}
  .hero-description{margin-top:16px;max-width:43ch}
  .hero-actions{margin-top:36px;gap:24px;flex-wrap:wrap}
  .hero-visual{align-self:center;margin:0 0 0 -16px}
  .signature-strip{padding-block:28px 36px}
  .approach{padding-block:104px 40px}
  .approach-grid{grid-template-columns:1fr 1fr;gap:64px 80px}
  .approach-copy{padding-top:52px}
  .approach-copy .approach-closing{margin-top:40px}
  .approach-dimensions{grid-column:1 / -1;justify-content:space-between;padding-top:32px}
  .expertises{padding-block:104px 112px}
  .section-heading{grid-template-columns:1.5fr 1fr;align-items:end;gap:64px;margin-bottom:64px}
  .section-heading>p{justify-self:end;font-size:1rem;margin-bottom:6px}
  .expertise summary{min-height:124px;grid-template-columns:64px 1fr 16px;gap:24px}
  .expertise-number{padding-top:10px}
  .expertise-content{grid-template-columns:.85fr 1fr;gap:64px;padding:0 64px 40px 88px}
  .expertise-content>p{font-size:1.5rem}
  .references{padding-block:88px 96px;--reference-width:190px;--reference-gap:72px}
  .references-heading{gap:64px;margin-bottom:56px}
  .reference-logos{gap:48px 56px}
  .method{padding-block:88px 72px}
  .method-heading{grid-template-columns:1fr 2fr;gap:64px;align-items:start}
  .method-heading>p{padding-top:8px}
  .method-steps{grid-template-columns:repeat(4,1fr);margin-top:72px;gap:32px}
  .method-steps li{padding-top:20px}
  .step-number{margin-bottom:52px}
  .agency{padding-block:104px 72px}
  .agency-grid{grid-template-columns:1fr 1fr;gap:64px 80px}
  .agency-copy{padding-top:52px}
  .agency-statement{grid-column:1 / -1;padding-top:52px;margin-top:16px}
  .agency-statement br{display:none}
  .contact{padding-block:112px 88px}
  .contact .section-index{margin-bottom:48px}
  .contact-bottom{grid-template-columns:1fr auto;align-items:end;gap:48px;margin-top:48px}
  .contact-bottom>p{font-size:1rem}
  .contact-grid{gap:64px;margin-top:56px}
  .contact-grid.has-form{grid-template-columns:.85fr 1.15fr}
  .footer-main{padding-block:40px}
  .footer-main>p{justify-self:center}
}
@media(min-width:1200px){
  .wrap{width:min(100% - 128px,1360px)}
  .hero-description{max-width:42ch}
  .desktop-nav{gap:36px}
  .hero-visual{margin-left:-32px;margin-right:0}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important}
}
