@charset "UTF-8";

:root {
  color-scheme: light;
  --ink: #17202b;
  --navy: #111b2d;
  --navy-deep: #0a1324;
  --blue: #293777;
  --paper: #f4f1e9;
  --paper-deep: #e9e5da;
  --white: #fbfaf6;
  --muted: #676d72;
  --line: rgba(23, 32, 43, .15);
  --gold: #c9aa70;
  --gold-light: #e3cf9e;
  --display: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: "Avenir Next", Avenir, "Segoe UI", Helvetica, Arial, sans-serif;
  --page: min(1280px, calc(100% - 96px));
  --ease: cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--gold-light); color: var(--navy-deep); }
.page-width { width: var(--page); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; transform: translateY(-150%); padding: 10px 14px; background: var(--white); color: var(--navy); }
.skip-link:focus { transform: translateY(0); }
.scroll-progress { position: fixed; z-index: 80; inset: 0 0 auto; height: 3px; pointer-events: none; }
.scroll-progress span { display: block; width: 0; height: 100%; background: var(--gold); transform-origin: left; }

.site-header { position: sticky; top: 0; z-index: 60; background: rgba(244, 241, 233, .95); border-bottom: 1px solid rgba(23,32,43,.08); backdrop-filter: blur(16px); }
.nav-shell { width: var(--page); min-height: 82px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.brand { display: flex; flex: 0 0 auto; align-items: center; gap: 13px; width: auto; text-decoration: none; }
.brand img { flex: 0 0 auto; width: 90px; height: auto; }
.brand-descriptor { max-width: 160px; color: rgba(23,32,43,.8); font: 550 12px/1.35 var(--sans); letter-spacing: .015em; }
.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.nav-links a { position: relative; text-decoration: none; color: #323943; font-size: 14px; letter-spacing: .025em; transition: color .2s ease; }
.nav-links a:not(.nav-contact)::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; background: var(--gold); content: ""; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav-links a:hover::after, .nav-links a[aria-current="location"]::after { transform: scaleX(1); }
.nav-links a:hover { color: var(--blue); }
.nav-links .nav-contact { padding: 11px 15px; border: 1px solid rgba(23,32,43,.24); transition: background .25s, color .25s, border-color .25s; }
.nav-links .nav-contact:hover { color: var(--white); background: var(--navy); border-color: var(--navy); }
.nav-contact span { margin-left: 10px; color: var(--gold); }
.menu-toggle { display: none; }

.hero { min-height: max(720px, calc(100svh - 82px)); position: relative; display: flex; flex-direction: column; justify-content: center; isolation: isolate; overflow: hidden; background: var(--navy-deep); color: var(--white); }
.hero-canvas, .hero-wash { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; }
.hero-canvas { opacity: .42; }
.hero-wash { z-index: -1; background: linear-gradient(90deg, rgba(10,19,36,.97) 0%, rgba(10,19,36,.82) 42%, rgba(10,19,36,.27) 100%), linear-gradient(0deg, rgba(10,19,36,.45), transparent 50%); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(340px, .82fr); align-items: center; gap: clamp(36px,6vw,90px); padding-top: 68px; padding-bottom: 118px; }
.hero-copy { position: relative; z-index: 2; max-width: 680px; }
.eyebrow, .section-kicker, .method-label, .card-index, .case-category, .work-card figcaption span, .contact-label { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; letter-spacing: .12em; line-height: 1.45; text-transform: uppercase; }
.eyebrow-light { color: rgba(255,255,255,.64); }
.eyebrow-mark { width: 24px; height: 1px; background: var(--gold); }
.eyebrow-divider { color: var(--gold); }
.hero h1 { max-width: 730px; margin: 28px 0 22px; font: 400 clamp(3.5rem, 7.25vw, 7.5rem)/.98 var(--display); letter-spacing: -.055em; }
.hero h1 em, .display-title em { color: var(--gold-light); font-weight: 400; }
.hero-lead { max-width: 545px; margin: 0; color: rgba(255,255,255,.73); font-size: clamp(16px,1.35vw,19px); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 27px; margin-top: 34px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 0 20px; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .035em; transition: transform .25s var(--ease), background .25s, color .25s; }
.button:hover { transform: translateY(-3px); }
.button-light { color: var(--navy); background: var(--paper); }
.button-light:hover { background: var(--gold-light); }
.button-light span { color: var(--blue); font-size: 17px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.28); padding-bottom: 5px; transition: color .25s, border-color .25s; }
.text-link-light { color: rgba(255,255,255,.82); }
.text-link span { display: inline-block; color: var(--gold-light); transition: transform .25s var(--ease); }
.text-link:hover { color: var(--white); border-color: var(--gold-light); }
.text-link:hover span { transform: translate(3px,-3px); }
.hero-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 21px; max-width: 630px; margin-top: 47px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.19); }
.hero-metrics div { display: flex; flex-direction: column; gap: 7px; }
.hero-metrics strong { color: var(--gold-light); font: 400 clamp(27px,3vw,39px)/1 var(--display); letter-spacing: -.04em; }
.js-ready .hero-metrics > div strong { opacity: 0; transform: translateY(8px) scale(.9); transition: opacity .48s var(--ease), transform .58s var(--ease); }
.js-ready .hero-metrics > div.is-visible strong { opacity: 1; transform: none; }
.js-ready .hero-metrics > div:nth-child(2) strong { transition-delay: .1s; }
.js-ready .hero-metrics > div:nth-child(3) strong { transition-delay: .2s; }
.hero-metrics span { color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.4; }
.hero-profile { width: min(100%, 475px); justify-self: end; align-self: end; margin: 0 0 -5px; }
.hero-portrait { margin: 0; }
.hero-photo-frame { position: relative; height: min(66vh, 620px); min-height: 410px; overflow: hidden; background: linear-gradient(145deg,rgba(227,207,158,.18),rgba(255,255,255,.015)); border: 1px solid rgba(227,207,158,.32); }
.hero-photo-frame::before { position: absolute; z-index: 1; inset: 12px; border: 1px solid rgba(227,207,158,.25); content: ""; pointer-events: none; }
.hero-photo-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; filter: grayscale(.12) brightness(1.035) contrast(.95) sepia(.035); }
.hero-portrait figcaption { margin: 13px 0 0; color: rgba(255,255,255,.82); text-align: right; font-size: 14px; line-height: 1.45; letter-spacing: .015em; }
.hero-visual { position: relative; width: min(100%, 570px); aspect-ratio: 1/1; justify-self: end; margin: -20px -2% -18px 0; color: var(--gold-light); }
.visual-ring { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(222,202,157,.3); border-radius: 50%; transform: translate(-50%,-50%); }
.visual-ring-one { width: 86%; height: 86%; animation: ring-breathe 8s ease-in-out infinite; }
.visual-ring-two { width: 64%; height: 64%; border-style: dashed; border-color: rgba(222,202,157,.34); animation: orbit 72s linear infinite; }
.visual-ring-three { width: 42%; height: 42%; border-color: rgba(222,202,157,.5); box-shadow: 0 0 60px rgba(201,170,112,.11), inset 0 0 60px rgba(201,170,112,.06); }
.visual-axis { position: absolute; top: 50%; left: 50%; width: 108%; height: 1px; background: linear-gradient(90deg, transparent,rgba(222,202,157,.52),transparent); transform: translate(-50%,-50%); }
.visual-axis-one { transform: translate(-50%,-50%) rotate(42deg); }
.visual-axis-two { transform: translate(-50%,-50%) rotate(-42deg); }
.visual-center { position: absolute; top: 50%; left: 50%; width: 104px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(222,202,157,.56); border-radius: 50%; background: rgba(11,20,39,.4); box-shadow: 0 0 50px rgba(201,170,112,.09); transform: translate(-50%,-50%); }
.visual-center span { font: 400 30px var(--display); letter-spacing: -.08em; }
.visual-label { position: absolute; display: flex; gap: 9px; align-items: center; color: rgba(255,255,255,.68); font-size: 9px; letter-spacing: .16em; }
.visual-label i { color: var(--gold); font: normal 9px var(--sans); }
.visual-label-top { top: 7%; left: 48%; }
.visual-label-right { top: 49%; right: -3%; }
.visual-label-bottom { bottom: 7%; left: 44%; }
.visual-coordinates { position: absolute; top: 50%; left: 1%; color: rgba(255,255,255,.37); font-size: 9px; line-height: 1.8; letter-spacing: .14em; transform: translateY(-50%); }
.hero-bottom { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: flex-end; align-items: center; padding-top: 20px; padding-bottom: 21px; border-top: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.72); font: 400 17px var(--display); letter-spacing: .015em; }
.hero-bottom a { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.68); font: 600 12px var(--sans); letter-spacing: .12em; text-decoration: none; }
.scroll-line { width: 23px; height: 1px; background: var(--gold); }
@keyframes orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes ring-breathe { 50% { transform: translate(-50%,-50%) scale(.97); opacity: .68; } }

.section-pad { padding: clamp(86px, 10vw, 152px) 0; }
.section-kicker { color: #697070; margin-bottom: 29px; }
.section-kicker span { color: var(--gold); font-size: 12px; letter-spacing: .06em; }
.display-title { margin: 0; color: var(--ink); font: 400 clamp(2.7rem, 5.8vw, 5.9rem)/1.02 var(--display); letter-spacing: -.045em; }
.display-title em { color: #a88950; }
.intro-section { background: var(--paper); }
.intro-layout { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(42px,8vw,132px); align-items: end; }
.intro-layout .display-title { max-width: 710px; }
.intro-copy { max-width: 530px; padding-bottom: 7px; }
.intro-copy p { color: var(--muted); font-size: 16px; line-height: 1.8; }
.intro-copy .intro-lead { margin-top: 0; color: var(--ink); font: 400 clamp(17px,1.5vw,21px)/1.62 var(--display); }
.arrow-link { display: inline-flex; align-items: center; gap: 20px; margin-top: 17px; color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; text-transform: uppercase; border-bottom: 1px solid rgba(23,32,43,.28); padding-bottom: 9px; }
.arrow-link span { color: #a88950; font-size: 16px; }
.approach-strip { display: flex; align-items: stretch; justify-content: space-between; gap: 0; margin-top: clamp(65px,9vw,120px); padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.approach-step { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 9px 18px; text-decoration: none; transition: background-color .3s, color .3s; }
.approach-step + .approach-step { border-left: 1px solid var(--line); }
.approach-step:hover, .approach-step:focus-visible { background: rgba(201,170,112,.11); color: var(--blue); }
.approach-step:focus-visible { outline: 2px solid #a88950; outline-offset: 2px; }
.strip-index { color: #a88950; font: 400 13px var(--display); }
.approach-strip p { margin: 0; font: 400 clamp(16px,1.7vw,22px) var(--display); }
.step-arrow { flex: 0 0 auto; color: #b79b67; font-size: 16px; transition: color .25s, transform .25s var(--ease); }
.approach-step:hover .step-arrow, .approach-step:focus-visible .step-arrow { color: var(--blue); transform: translate(3px,-3px); }

.situations-section { background: var(--white); }
.section-heading { display: grid; grid-template-columns: .45fr 1.1fr .75fr; gap: clamp(25px,5vw,70px); align-items: end; margin-bottom: 55px; }
.section-heading .section-kicker { align-self: start; margin-top: 10px; }
.section-heading .display-title { grid-column: 2; }
.section-heading > p { max-width: 400px; margin: 0 0 6px; color: var(--muted); font-size: 15px; line-height: 1.75; }
.situation-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.situation-card { position: relative; min-height: 275px; padding: 29px 32px 42px 0; transition: background-color .32s, color .32s; }
.situation-card:hover { background: var(--hover-tone, rgba(201,170,112,.09)); }
.situation-card:nth-child(1) { --hover-tone: #f6f3eb; }
.situation-card:nth-child(2) { --hover-tone: #f2ecdc; }
.situation-card:nth-child(3) { --hover-tone: #ece3cf; }
.situation-card + .situation-card { padding-left: 32px; border-left: 1px solid var(--line); }
.card-index { color: #a88950; font-size: 11px; }
.situation-card h3 { max-width: 290px; margin: 39px 0 12px; font: 400 clamp(22px,2.1vw,29px)/1.17 var(--display); }
.situation-card p { max-width: 340px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.card-mark { position: absolute; right: 12px; bottom: 23px; color: #b39b6c; font-size: 18px; transition: color .25s, transform .25s var(--ease); }
.situation-card:hover .card-mark { color: var(--blue); transform: translate(3px,-3px); }

.film-section { background: var(--navy); color: var(--white); }
.film-heading, .work-heading { display: flex; justify-content: space-between; align-items: end; gap: 55px; margin-bottom: 51px; }
.section-kicker-light { color: rgba(255,255,255,.52); }
.display-title-light { color: var(--white); }
.film-heading p, .work-heading > p { max-width: 470px; margin: 0 2% 5px 0; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.75; }
.film-frame { margin: 0; border: 1px solid rgba(255,255,255,.14); background: #050b16; }
.film-player { position: relative; }
.film-frame video { display: block; width: 100%; aspect-ratio: 16/9; object-fit: contain; background: #050b16; }
.film-load-button { position: absolute; inset: 0; display: grid; width: 100%; height: 100%; place-items: center; border: 0; background: transparent; color: var(--white); cursor: pointer; }
.film-load-button span { display: grid; width: 76px; height: 76px; place-items: center; padding-left: 5px; border: 1px solid rgba(226,201,136,.9); border-radius: 50%; background: rgba(5,11,22,.56); color: var(--gold); font-size: 23px; transition: background .25s ease, transform .25s ease; }
.film-load-button:hover span, .film-load-button:focus-visible span { transform: scale(1.06); background: rgba(5,11,22,.82); }
.film-load-button:focus-visible { outline: 2px solid var(--gold); outline-offset: -5px; }
.film-load-button.is-loading { cursor: wait; }
.film-load-button.is-loading span { opacity: .45; }
.film-load-button[hidden] { display: none; }
.film-frame video::cue { color: #fff; background-color: rgba(5,11,22,.82); font-family: var(--sans); font-size: 1rem; font-weight: 500; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.film-frame figcaption { display: flex; justify-content: space-between; gap: 15px; padding: 17px 20px; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .08em; }
.film-frame figcaption i { padding: 0 5px; color: var(--gold); font-style: normal; }

.methods-section { background: var(--paper); }
.methods-heading { margin-bottom: 56px; }
.code-method { padding: clamp(28px,5vw,60px); background: var(--white); border: 1px solid var(--line); }
.method-topline { display: grid; grid-template-columns: 165px 1fr auto; gap: 35px; align-items: center; padding-bottom: 38px; border-bottom: 1px solid var(--line); }
.method-topline img { width: 150px; max-height: 55px; object-fit: contain; object-position: left center; }
.method-label { color: #927848; font-size: 12px; }
.method-topline h3 { max-width: 590px; margin: 8px 0 0; font: 400 clamp(22px,2.5vw,34px)/1.2 var(--display); }
.method-corner { align-self: start; color: #767d7b; font-size: 11px; letter-spacing: .12em; }
.code-steps { position: relative; display: grid; grid-template-columns: repeat(4,1fr); padding: 42px 0 53px; }
.code-steps::before { position: absolute; top: 64px; right: 11%; left: 11%; height: 1px; background: linear-gradient(90deg,var(--gold),rgba(201,170,112,.23)); content: ""; transform: scaleX(1); transform-origin: left; }
.code-step { position: relative; padding: 0 21px; text-align: center; scroll-margin-top: 105px; transition: transform .3s var(--ease); }
.code-step:hover { transform: translateY(-4px); }
.step-letter { position: relative; z-index: 1; display: grid; place-items: center; width: 45px; height: 45px; margin: 0 auto 20px; border: 1px solid #cfbd96; border-radius: 50%; background: var(--white); color: var(--blue); font: 400 19px var(--display); transition: background-color .28s, color .28s, border-color .28s, transform .28s var(--ease); }
.code-step:hover .step-letter { transform: scale(1.05); border-color: #b2945f; background: #e9dcbe; color: var(--navy); }
.code-step:nth-child(1):hover .step-letter { background: #f4ecda; }
.code-step:nth-child(2):hover .step-letter { background: #eee0c2; }
.code-step:nth-child(3):hover .step-letter { background: #e6d3ab; }
.code-step:nth-child(4):hover .step-letter { background: #dcc28f; }
.step-name { display: block; font: 400 22px var(--display); }
.code-step p { max-width: 225px; margin: 10px auto 0; color: var(--muted); font-size: 14px; line-height: 1.65; }
.step-index { display: block; margin-top: 24px; color: #897850; font-size: 11px; letter-spacing: .12em; }
.sens-inline { color: var(--blue); font-size: .9em; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.sens-inline sup { position: relative; top: -.15em; margin-left: 1px; font-size: .55em; letter-spacing: 0; }
.cap-method { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 35px; margin-top: 18px; padding: 27px clamp(28px,5vw,60px); border: 1px solid var(--line); background: #eeeadf; }
.cap-logo-wrap { width: 135px; padding: 4px; background: transparent; }
.cap-logo-wrap img { width: 100%; max-height: 46px; object-fit: contain; }
.cap-copy h3 { margin: 7px 0 6px; font: 400 27px var(--display); }
.cap-copy p { max-width: 700px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.cap-method .arrow-link { margin: 0; white-space: nowrap; }

.services-section { background: var(--white); }
.services-heading { margin-bottom: 44px; }
.service-list { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 60px minmax(210px,.9fr) 1.1fr 20px; gap: 28px; align-items: center; padding: 27px 5px; border-bottom: 1px solid var(--line); transition: padding .3s var(--ease), background .3s; }
.service-row:hover { padding-inline: 16px; background: #f6f3eb; }
.service-no { color: #ad9667; font: 400 14px var(--display); }
.service-row h3 { margin: 0; font: 400 clamp(19px,2vw,26px) var(--display); }
.service-row p { max-width: 560px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.7; }
.service-arrow { color: #ad9667; }

.cases-section { background: var(--paper-deep); }
.case-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 13px; }
.case-card { position: relative; min-height: 335px; display: flex; flex-direction: column; align-items: flex-start; padding: 35px 38px 33px; border: 1px solid rgba(23,32,43,.12); background: var(--white); transition: transform .35s var(--ease), box-shadow .35s, background-color .35s, border-color .35s; }
.case-card:hover { transform: translateY(-4px); border-color: rgba(23,32,43,.22); background: #f5f1e7; box-shadow: 0 20px 45px rgba(17,27,45,.07); }
.case-card:nth-child(2):hover { background: #f2ecdc; }
.case-card:nth-child(3):hover { background: #ece3cf; }
.case-logo { height: 54px; display: flex; align-items: center; margin-bottom: 25px; }
.case-logo img { max-width: 125px; max-height: 48px; object-fit: contain; object-position: left center; }
.case-card:nth-child(1) .case-logo img { max-width: 84px; }
.case-category { color: #80683f; font-size: 11px; }
.case-card h3 { max-width: 420px; margin: 11px 0 9px; font: 400 clamp(22px,2.25vw,30px)/1.2 var(--display); }
.case-card p { max-width: 530px; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.75; }
.case-index { position: absolute; right: 24px; bottom: 20px; color: #aa9a7a; font: 400 11px var(--display); }
.case-anonymous { background: var(--navy); color: var(--white); }
.case-anonymous:hover { background: #182640; }
.case-anonymous h3 { color: var(--white); }
.case-anonymous p { color: rgba(255,255,255,.76); }
.case-anon-mark { height: 54px; display: flex; align-items: center; margin-bottom: 25px; color: var(--gold-light); font-size: 19px; letter-spacing: .4em; }
.case-anonymous .case-index { color: var(--gold-light); }

.work-section { background: var(--navy-deep); color: var(--white); }
.work-heading { margin-bottom: 35px; }
.work-filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-bottom: 25px; }
.work-filter { min-height: 42px; padding: 8px 15px; border: 1px solid rgba(255,255,255,.27); border-radius: 999px; background: transparent; color: rgba(255,255,255,.78); font: 500 13px/1.3 var(--sans); cursor: pointer; transition: background .2s,border-color .2s,color .2s; }
.work-filter:hover,.work-filter:focus-visible { border-color: var(--gold-light); color: var(--white); outline: none; }
.work-filter.is-active { border-color: var(--gold-light); background: var(--gold-light); color: var(--navy-deep); }
.work-grid { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-auto-rows: minmax(220px, 26vw); gap: 13px; }
.work-card { position: relative; grid-column: span 4; min-height: 230px; margin: 0; overflow: hidden; background: #18243a; }
.work-card[hidden] { display: none; }
.work-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease), filter .5s; }
.work-card[data-category="architecture"] img,.work-card[data-category="plateforme"] img { object-fit: contain; padding: clamp(14px,2vw,28px); background: var(--paper); }
.work-card--logo img { object-fit: contain; padding: clamp(14px,2vw,28px); background: var(--paper); }
.work-card:hover img { transform: scale(1.035); filter: saturate(.93); }
.work-card::after { position: absolute; inset: 42% 0 0; background: linear-gradient(0deg,rgba(7,13,25,.8),transparent); content: ""; pointer-events: none; }
.work-card figcaption { position: absolute; z-index: 1; right: 20px; bottom: 18px; left: 20px; display: flex; justify-content: space-between; align-items: end; gap: 15px; color: var(--white); }
.work-card figcaption b { padding: 7px 11px; background: rgba(10,19,36,.76); color: var(--white); font: 500 13px/1.3 var(--sans); letter-spacing: .025em; backdrop-filter: blur(8px); }
.work-note { margin: 19px 0 0; color: rgba(255,255,255,.63); font-size: 13px; }

.references-section { background: var(--white); }
.references-heading { margin-bottom: 49px; }
.logo-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.logo-cell { position: relative; min-height: 118px; display: grid; place-items: center; overflow: hidden; padding: 20px; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .4s var(--ease); }
.logo-cell::after { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%,rgba(201,170,112,.16),transparent 68%); content: ""; opacity: 0; transform: scale(.72); transition: opacity .45s,transform .55s var(--ease); pointer-events: none; }
.logo-cell img { position: relative; z-index: 1; width: auto; max-width: min(100%, 180px); max-height: 56px; object-fit: contain; filter: grayscale(1); opacity: .82; transform: scale(var(--logo-scale, 1)); transition: filter .45s var(--ease), opacity .45s, transform .5s var(--ease); }
.logo-cell--reduced img { --logo-scale: .8; --logo-hover-scale: .848; }
.logo-cell--enlarged img { --logo-scale: 1.15; --logo-hover-scale: 1.219; }
.logo-cell--slightly-enlarged img { --logo-scale: 1.08; --logo-hover-scale: 1.1448; }
.logo-cell--orange img,.logo-cell--vqr img,.logo-cell--magix img { max-width: min(100%, 205px); max-height: 66px; }
.logo-cell--lesieur img { max-width: min(100%, 205px); max-height: 78px; }
.logo-cell--honda img,.logo-cell--bosch img { max-width: min(100%, 190px); max-height: 62px; }
.logo-cell--neo img { max-width: min(100%, 138px); max-height: 76px; }
.logo-cell--holcim img { max-width: min(100%, 190px); max-height: 54px; }
.logo-cell--accor img { max-width: min(100%, 220px); max-height: 54px; }
@media (hover: hover) {
  .logo-cell:hover { background-color: #fff; }
  .logo-cell:hover::after { opacity: 1; transform: scale(1); }
  .logo-cell:hover img { filter: grayscale(0); opacity: 1; transform: scale(var(--logo-hover-scale, 1.06)); }
}
@media (hover: none) {
  .logo-cell img { filter: grayscale(0); opacity: 1; }
}
.institutional-experience { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 36px; align-items: center; margin-top: 31px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.institution-divider { height: 72px; background: var(--line); }
.institution-item { display: flex; align-items: center; gap: 24px; }
.institution-item img { width: 62px; height: 62px; object-fit: contain; }
.institution-item p { max-width: 360px; margin: 0; color: var(--ink); font: 400 17px/1.4 var(--display); }
.institution-item p span { display: block; margin-bottom: 7px; color: #80683f; font: 650 11px/1.4 var(--sans); letter-spacing: .09em; text-transform: uppercase; }
.references-intro { font-size: 16px !important; }
.institution-morocco img { width: 68px; }

.about-section { background: var(--paper); }
.about-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(50px,9vw,140px); align-items: center; }
.about-image { position: relative; max-width: 470px; }
.about-image::before { position: absolute; top: -17px; right: -17px; bottom: 27px; left: 27px; border: 1px solid rgba(173,150,103,.6); content: ""; }
.about-image img { position: relative; width: 100%; aspect-ratio: 4/5; object-fit: cover; filter: grayscale(1) brightness(1.035) contrast(.94) sepia(.035); }
.image-caption { position: relative; display: block; padding-top: 14px; color: #6b6d69; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.image-caption i { padding: 0 7px; color: #ad9667; font-style: normal; }
.about-copy .display-title { font-size: clamp(2.7rem,4.9vw,5.2rem); }
.about-copy > p { max-width: 620px; color: var(--muted); font-size: 16px; line-height: 1.8; }
.about-copy > .about-lead { margin-top: 26px; color: var(--ink); font: 400 20px/1.55 var(--display); }
.experience-note { display: flex; align-items: center; gap: 22px; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; letter-spacing: .04em; line-height: 1.6; }
.experience-number { color: #a88950; font: 400 56px/.9 var(--display); letter-spacing: -.08em; }

.testimonials-section { background: var(--navy); color: var(--white); }
.testimonials-heading { display: block; margin-bottom: 50px; }
.testimonials-heading .display-title { max-width: 900px; }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.quote-card { position: relative; min-height: 330px; margin: 0; padding: 34px 37px 29px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.025); }
.quote-card-offset { margin-top: 44px; }
.quote-mark { display: block; height: 37px; color: var(--gold-light); font: 400 56px/.9 var(--display); }
.quote-card blockquote { margin: 17px 0 28px; color: rgba(255,255,255,.78); font: 400 clamp(15px,1.45vw,18px)/1.65 var(--display); }
.quote-card figcaption { display: flex; flex-direction: column; gap: 5px; padding-top: 15px; border-top: 1px solid rgba(255,255,255,.15); }
.quote-card figcaption strong { font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.quote-card figcaption span { color: rgba(255,255,255,.7); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }

.contact-section { background: var(--paper); }
.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(50px,8vw,110px); align-items: start; }
.contact-lead { max-width: 440px; margin: 26px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.contact-card { padding: clamp(27px,4vw,48px); background: var(--white); border: 1px solid var(--line); }
.contact-label { color: #80683f; font-size: 12px; }
.contact-email { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 21px 0 16px; font: 400 clamp(19px,2vw,27px) var(--display); text-decoration: none; overflow-wrap: anywhere; }
.contact-email span { color: #a88950; font: 400 20px var(--sans); }
.contact-phone, .contact-location { display: block; color: var(--muted); font-size: 15px; text-decoration: none; }
.contact-whatsapp { display: inline-flex; align-items: center; gap: 14px; margin: 20px 0; padding: 10px 13px; border: 1px solid rgba(23,108,78,.3); background: rgba(23,108,78,.06); color: #176c4e; font-size: 15px; font-weight: 700; text-decoration: none; transition: background-color .25s, border-color .25s, color .25s; }
.contact-whatsapp:hover, .contact-whatsapp:focus-visible { border-color: #176c4e; background: #176c4e; color: #fff; }
.contact-whatsapp:focus-visible { outline: 2px solid #176c4e; outline-offset: 3px; }
.contact-whatsapp span { display: inline-block; font-size: 18px; transition: transform .25s var(--ease); }
.contact-whatsapp:hover span, .contact-whatsapp:focus-visible span { transform: translate(3px,-3px); }
.contact-location { margin: 0; font-style: normal; line-height: 1.65; }
.contact-rule { height: 1px; margin: 27px 0 20px; background: var(--line); }
.contact-form { display: grid; grid-template-columns: 1fr; gap: 9px; }
.contact-form h3 { grid-column: 1 / -1; margin: 0 0 7px; font: 400 28px var(--display); }
.contact-form label { grid-column: 1; align-self: end; margin-top: 5px; color: #404851; font-size: 14px; font-weight: 600; }
.contact-form label span { color: var(--muted); font-weight: 400; }
.contact-form input,.contact-form textarea { width: 100%; min-height: 46px; grid-column: 1; padding: 11px 13px; border: 1px solid rgba(23,32,43,.22); border-radius: 0; background: #fffefa; color: var(--ink); font: 400 15px/1.5 var(--sans); }
.contact-form textarea { min-height: 118px; resize: vertical; }
.contact-form input:focus,.contact-form textarea:focus { outline: 2px solid rgba(168,137,80,.5); outline-offset: 2px; }
.button-dark { grid-column: 1 / -1; justify-self: start; margin-top: 7px; border: 0; background: var(--navy); color: var(--white); cursor: pointer; }
.button-dark:hover { background: #263b63; }
.button-dark span { color: var(--gold-light); }
.form-note { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 13px; }
.site-footer { padding: 25px 0 15px; background: var(--navy-deep); color: rgba(255,255,255,.59); }
.footer-main { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 0 22px; border-bottom: 1px solid rgba(255,255,255,.15); }
.footer-brand { width: 92px; display: block; }
.footer-brand img { width: 100%; filter: none; }
.footer-main > span { font: 400 17px var(--display); }
.back-to-top { color: rgba(255,255,255,.77); font-size: 13px; text-decoration: none; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 13px; color: rgba(255,255,255,.66); font-size: 12px; letter-spacing: .04em; }

.js-ready [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.js-ready .hero-metrics > div:nth-child(2), .js-ready .code-step:nth-child(2) { transition-delay: .09s; }
.js-ready .hero-metrics > div:nth-child(3), .js-ready .code-step:nth-child(3) { transition-delay: .18s; }
.js-ready .code-step:nth-child(4) { transition-delay: .27s; }
.js-ready .code-steps::before { transform: scaleX(0); transition: transform .95s .15s var(--ease); }
.js-ready .code-steps.is-visible::before { transform: scaleX(1); }
.js-ready .code-step[data-reveal].is-visible:hover, .js-ready .case-card[data-reveal].is-visible:hover { transform: translateY(-4px); }
.js-ready .situation-card:nth-child(2), .js-ready .case-card:nth-child(2), .js-ready .quote-card-offset { transition-delay: .08s; }
.js-ready .situation-card:nth-child(3), .js-ready .case-card:nth-child(3) { transition-delay: .15s; }
.js-ready .case-card:nth-child(4) { transition-delay: .22s; }
.js-ready .logo-cell:nth-child(5n + 2) { transition-delay: .05s; }
.js-ready .logo-cell:nth-child(5n + 3) { transition-delay: .1s; }
.js-ready .logo-cell:nth-child(5n + 4) { transition-delay: .15s; }
.js-ready .logo-cell:nth-child(5n + 5) { transition-delay: .2s; }

@media (max-width: 1080px) {
  :root { --page: min(100% - 64px, 1120px); }
  .nav-shell { min-height: 74px; }
  .hero { min-height: max(680px, calc(100svh - 74px)); }
  .hero-grid { grid-template-columns: minmax(0,1.05fr) minmax(320px,.9fr); }
  .hero-profile { width: min(100%,430px); }
  .section-heading { grid-template-columns: .35fr 1.1fr .75fr; gap: 28px; }
  .work-grid { grid-auto-rows: 220px; }
  .logo-grid { grid-template-columns: repeat(5,1fr); }
}
@media (min-width: 801px) and (max-width: 1080px) {
  .brand-descriptor { display: none; }
  .nav-shell { gap: 18px; }
  .nav-links { gap: clamp(12px,1.7vw,18px); }
  .nav-links a { font-size: 12px; }
  .nav-links .nav-contact { padding: 9px 11px; }
}
@media (max-width: 800px) {
  :root { --page: calc(100% - 44px); }
  .nav-shell { min-height: 70px; gap: 12px; }
  .brand { gap: 9px; }
  .brand img { width: 76px; }
  .brand-descriptor { display: block; max-width: 142px; font-size: 11px; letter-spacing: .01em; }
  .menu-toggle { width: 43px; height: 43px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6px; border: 1px solid rgba(23,32,43,.2); background: transparent; color: var(--ink); cursor: pointer; }
  .menu-toggle span { width: 17px; height: 1px; display: block; background: var(--navy); transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .nav-links { position: absolute; z-index: 1; inset: 100% 0 auto; height: calc(100svh - 70px); display: flex; flex-direction: column; align-items: stretch; gap: 0; overflow-y: auto; padding: 24px 23px 45px; background: var(--paper); opacity: 0; visibility: hidden; transform: translateY(-7px); transition: opacity .22s, transform .22s, visibility .22s; }
  .nav-links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a:not(.nav-contact) { padding: 17px 0; border-bottom: 1px solid var(--line); font: 400 25px var(--display); }
  .nav-links a:not(.nav-contact)::after { display: none; }
  .nav-links .nav-contact { margin-top: 25px; text-align: center; }
  .hero { min-height: 825px; min-height: max(790px, calc(100svh - 70px)); }
  .hero-grid { position: static; display: block; padding-top: 54px; padding-bottom: 140px; }
  .hero-copy { max-width: 690px; }
  .hero h1 { max-width: 610px; font-size: clamp(3.4rem,11vw,6rem); }
  .hero-metrics { position: relative; z-index: 2; max-width: 58%; gap: 13px; }
  .hero-profile { position: absolute; z-index: 0; right: -6%; bottom: 57px; width: min(39vw,330px); opacity: .82; }
  .hero-photo-frame { height: min(58vh,410px); min-height: 300px; }
  .hero-portrait figcaption { margin-top: 10px; font-size: 12px; }
  .hero-wash { background: linear-gradient(90deg,rgba(10,19,36,.98),rgba(10,19,36,.72) 64%,rgba(10,19,36,.38)),linear-gradient(0deg,rgba(10,19,36,.68),transparent 65%); }
  .hero-bottom { width: var(--page); }
  .intro-layout { grid-template-columns: 1fr; gap: 25px; }
  .intro-copy { max-width: 650px; }
  .section-heading { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .section-heading .section-kicker { margin: 0; }
  .section-heading .display-title { grid-column: auto; }
  .section-heading > p { max-width: 600px; }
  .film-heading, .work-heading { align-items: start; flex-direction: column; gap: 23px; }
  .film-heading p, .work-heading > p { max-width: 620px; }
  .method-topline { grid-template-columns: 130px 1fr; gap: 25px; }
  .method-topline img { width: 120px; }
  .method-corner { display: none; }
  .code-steps { grid-template-columns: 1fr 1fr; row-gap: 30px; }
  .code-steps::before { display: none; }
  .code-step { border-bottom: 1px solid var(--line); padding: 0 13px 23px; }
  .code-step:nth-child(n+3) { border-bottom: 0; }
  .cap-method { grid-template-columns: 120px 1fr; gap: 20px; }
  .cap-logo-wrap { width: 118px; }
  .cap-method .arrow-link { grid-column: 2; justify-self: start; }
  .work-grid { grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: 220px; }
  .work-card { grid-column: span 3; }
  .logo-grid { grid-template-columns: repeat(4,1fr); }
  .logo-cell:nth-last-child(3) { grid-column: 2; }
  .logo-cell:nth-last-child(2),.logo-cell:last-child { grid-column: auto; }
  .about-layout { grid-template-columns: .82fr 1.18fr; gap: 40px; }
  .quote-grid { grid-template-columns: 1fr; gap: 13px; }
  .quote-card-offset { margin-top: 0; }
  .contact-layout { grid-template-columns: 1fr; gap: 35px; }
}
@media (max-width: 560px) {
  :root { --page: calc(100% - 36px); }
  .section-pad { padding: 82px 0; }
  .nav-shell { min-height: 64px; }
  .nav-links { height: calc(100svh - 64px); }
  .hero { min-height: 840px; min-height: max(815px, calc(100svh - 64px)); }
  .hero-grid { padding-top: 48px; padding-bottom: 155px; }
  .hero h1 { margin-top: 23px; font-size: clamp(3.1rem,14vw,5rem); }
  .hero-lead { max-width: 410px; font-size: 16px; line-height: 1.55; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 18px; margin-top: 25px; }
  .hero-metrics { width: 68%; max-width: 280px; gap: 8px; margin-top: 28px; padding-top: 17px; }
  .hero-metrics strong { font-size: clamp(24px,7vw,31px); }
  .hero-metrics span { font-size: 12px; }
  .hero-profile { right: 0; bottom: 68px; width: min(53vw,280px); opacity: .8; }
  .hero-photo-frame { height: min(38vh,285px); min-height: 250px; }
  .hero-portrait figcaption { margin-top: 9px; font-size: 11px; }
  .hero-wash { background: linear-gradient(90deg,rgba(10,19,36,.98),rgba(10,19,36,.84) 69%,rgba(10,19,36,.55)),linear-gradient(0deg,rgba(10,19,36,.76),transparent 70%); }
  .hero-bottom { padding-top: 15px; padding-bottom: 16px; }
  .hero-bottom a { font-size: 12px; }
  .display-title { font-size: clamp(2.6rem,12vw,4rem); }
  .approach-strip { align-items: stretch; flex-direction: column; gap: 0; margin-top: 48px; padding: 10px 0; }
  .approach-step { width: 100%; min-height: 54px; padding: 10px 5px; }
  .approach-step + .approach-step { border-top: 1px solid var(--line); border-left: 0; }
  .approach-strip p { font-size: 19px; }
  .step-arrow { margin-left: auto; }
  .situation-grid { grid-template-columns: 1fr; }
  .situation-card, .situation-card + .situation-card { min-height: 220px; padding: 24px 31px 28px 0; border-left: 0; }
  .situation-card + .situation-card { border-top: 1px solid var(--line); }
  .situation-card h3 { margin-top: 24px; }
  .film-frame figcaption { align-items: flex-start; flex-direction: column; font-size: 11px; }
  .code-method { padding: 23px 18px; }
  .method-topline { grid-template-columns: 1fr; gap: 14px; padding-bottom: 25px; }
  .method-topline img { width: 130px; }
  .method-topline h3 { font-size: 25px; }
  .code-steps { padding: 29px 0 32px; row-gap: 24px; }
  .code-step { padding-inline: 6px; }
  .step-name { font-size: 19px; }
  .code-step p { font-size: 13px; }
  .cap-method { grid-template-columns: 1fr; gap: 15px; padding: 23px 21px; }
  .cap-logo-wrap { width: 128px; }
  .cap-copy h3 { font-size: 25px; }
  .cap-method .arrow-link { grid-column: 1; }
  .service-row { grid-template-columns: 34px 1fr 16px; gap: 10px; padding: 20px 0; }
  .service-no { grid-row: 1 / span 2; align-self: start; padding-top: 5px; }
  .service-row h3 { grid-column: 2; font-size: 21px; }
  .service-row p { grid-column: 2; font-size: 14px; }
  .service-arrow { grid-column: 3; grid-row: 1 / span 2; }
  .case-grid { grid-template-columns: 1fr; }
  .case-card { min-height: 310px; padding: 28px 25px; }
  .work-filters { gap: 7px; margin-bottom: 18px; }
  .work-filter { min-height: 40px; padding: 8px 12px; font-size: 12px; }
  .work-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-auto-rows: 190px; gap: 8px; }
  .work-card { grid-column: span 1; min-height: 180px; }
  .work-card figcaption { right: 9px; bottom: 9px; left: 9px; }
  .work-card figcaption b { padding: 6px 8px; font-size: 12px; }
  .logo-grid { grid-template-columns: repeat(3,1fr); }
  .logo-cell { min-height: 84px; padding: 14px; }
  .logo-cell img { max-height: 44px; }
  .logo-cell--orange img,.logo-cell--vqr img,.logo-cell--magix img { max-height: 50px; }
  .logo-cell--lesieur img { max-height: 56px; }
  .logo-cell--honda img,.logo-cell--bosch img { max-height: 48px; }
  .logo-cell--neo img { max-width: min(100%, 95px); max-height: 55px; }
  .logo-cell--holcim img { max-width: min(100%, 150px); max-height: 43px; }
  .logo-cell--accor img { max-width: min(100%, 180px); max-height: 40px; }
  .logo-cell:nth-last-child(3),.logo-cell:nth-last-child(2),.logo-cell:last-child { grid-column: auto; }
  .institutional-experience { grid-template-columns: 1fr; gap: 18px; }
  .institution-divider { width: 100%; height: 1px; }
  .institution-item { gap: 17px; }
  .institution-item img { width: 51px; height: 51px; }
  .institution-item p { font-size: 16px; }
  .about-layout { grid-template-columns: 1fr; gap: 54px; }
  .about-image { max-width: 370px; width: 86%; }
  .about-image::before { top: -12px; right: -12px; bottom: 20px; left: 20px; }
  .about-copy .display-title { font-size: clamp(2.6rem,11vw,4rem); }
  .quote-card { min-height: 0; padding: 26px 23px 23px; }
  .quote-card blockquote { font-size: 16px; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-form label,.contact-form input,.contact-form textarea,.contact-form h3,.button-dark,.form-note { grid-column: 1; }
  .contact-email { font-size: 21px; }
  .footer-main { align-items: flex-start; flex-direction: column; }
  .footer-main > span { font-size: 14px; }
}
@media (max-width: 360px) {
  .nav-shell { gap: 8px; }
  .brand { gap: 7px; }
  .brand img { width: 68px; }
  .brand-descriptor { max-width: 130px; font-size: 10.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
}