:root{--ivory:#f8f5ed;--ink:#101719;--petrol:#125469;--orange:#ff7526}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--ivory)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}a{color:inherit}h1,h2,h3,p{margin:0}h1,h2{letter-spacing:-.05em;line-height:1.04}h1{font-size:clamp(44px,5.15vw,78px)}h2{font-size:clamp(34px,4.1vw,62px)}h3{font-size:25px;letter-spacing:-.025em}h2 span,h1 em,h2 em{color:var(--orange);font-style:normal}p{line-height:1.6}main{overflow:hidden}.ivory{background:var(--ivory)}.dark{background:var(--petrol);color:var(--ivory)}.eyebrow{font-size:11px;letter-spacing:.16em;font-weight:700;margin-bottom:22px}.ivory .eyebrow{color:#b94812}.site-nav{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between}.site-nav a{text-decoration:none}.site-nav img{display:block;width:116px;height:auto}.site-nav nav{display:flex;align-items:center}.nav-contact{border:1px solid;border-radius:30px}.agency-hero{position:relative;min-height:740px;padding:150px 5.3% 100px;display:grid;grid-template-columns:1.2fr 1fr;gap:3%;align-items:center}.hero-copy{position:relative;z-index:3;align-self:start}.hero-copy h1{width:125%;position:relative;z-index:3;pointer-events:none}.intro{font-size:18px;max-width:520px;margin-top:34px}.signature{margin-top:30px;font-size:16px;font-weight:700}.hero-art{position:relative;height:450px;margin-top:65px;perspective:1000px;--px:0px;--py:0px}.paper-art{position:absolute;left:0;top:40px;width:58%;height:355px;transform:translate(var(--px),var(--py)) rotate(-5deg);box-shadow:0 18px 24px #132b3120;background-position:0% center}.art-photo{background-image:url(assets/agence-matieres.png);background-size:300% 100%;background-repeat:no-repeat}.brief-sheet{position:absolute;right:0;top:150px;width:43%;height:280px;padding:24px 20px;background:linear-gradient(115deg,#fffdf5,#e9e5d9);box-shadow:8px 12px 22px #132b3120;transform:translate(calc(var(--px)*-.5),calc(var(--py)*-.5)) rotate(4deg);color:#153d47}.brief-sheet>span{font-size:8px;letter-spacing:.15em}.brief-sheet strong{display:block;font-size:26px;line-height:1.05;margin:30px 0}.brief-sheet small{font-size:9px;letter-spacing:.14em;line-height:1.55}.print-marks{position:absolute;inset:12px;border:1px solid #16394218;pointer-events:none}.glass-sheet{position:absolute;right:3%;top:0;width:25%;height:155px;background:linear-gradient(130deg,#a6d8dd90,#125469c9,#14526355);border:1px solid #c9f2ec;box-shadow:6px 8px 0 #12546929,inset 3px 0 0 #ecffff7a;transform:rotate(-7deg);animation:glass-life 7s ease-in-out infinite}.art-label{position:absolute;right:-10px;bottom:0;background:var(--orange);padding:17px 24px;border-radius:50px;font-size:13px;font-weight:700;transform:rotate(-4deg)}.orange-loop{position:absolute;width:380px;height:570px;border:65px solid var(--orange);border-radius:55% 38% 55% 45%;right:-290px;top:-170px;transform:rotate(28deg);animation:loop-life 12s ease-in-out infinite}.scroll-cue{position:absolute;left:50%;bottom:25px;width:40px;height:44px;display:grid;place-items:center}.scroll-cue span{width:20px;height:31px;border:1px solid #21424d;border-radius:14px;position:relative}.scroll-cue span:after{content:'';position:absolute;width:2px;height:7px;top:6px;left:8px;background:#21424d;animation:glass-life 2s infinite}.film-section,.responsibility{position:relative;padding:70px 5.3%}.liquid-edge{position:absolute;top:-79px;left:0;width:100%;height:80px;fill:var(--petrol);pointer-events:none}.film-layout{display:grid;grid-template-columns:.75fr 1.35fr;align-items:center;gap:7%;max-width:1440px;margin:auto}.film-copy p:not(.eyebrow){font-size:18px;margin:22px 0}.duration{font-size:10px;letter-spacing:.15em;opacity:.75}.film-cover{display:block;width:100%;height:330px;border:0;background:#07242e;position:relative;overflow:hidden;padding:0;cursor:pointer;border-radius:5px;color:white;margin:0}.film-cover>img,.film-cover>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s,opacity .4s}.film-cover>video{opacity:0}.film-cover.preview-playing>video{opacity:1}.film-cover:hover>img{transform:scale(1.04)}.film-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 40%,#03141999);pointer-events:none}.film-play{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%);width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:var(--orange);font-size:25px;transition:transform .3s}.film-cover:hover .film-play{transform:translate(-50%,-50%) scale(1.12)}.film-action{position:absolute;z-index:2;bottom:23px;left:25px;font-size:14px}.production-section{padding:95px 5.3% 115px}.production-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:6%;margin-top:40px}.printer-photo{position:relative;min-height:570px;background-position:50% center;overflow:hidden;border-radius:3px}.printer-photo:after{content:'';position:absolute;inset:60% 0 0;background:linear-gradient(transparent,#08272d99)}.printer-photo>span{position:absolute;z-index:2;bottom:26px;left:26px;font-size:18px;color:white;font-weight:700}.feed-line{position:absolute;z-index:2;left:0;right:0;height:2px;background:#ff752650;box-shadow:0 0 35px #ff752650;top:var(--feed,30%)}.production-copy p{font-size:17px;margin-bottom:22px}.material-photo{height:220px;background-position:100% center;border-radius:3px;margin-top:25px}.image-caption{font-size:10px;color:#788181;margin-top:12px}.responsibility{padding-top:55px;padding-bottom:80px;background:#0c424f}.responsibility .liquid-edge{fill:#0c424f}.responsibility-head{display:flex;justify-content:space-between;gap:40px}.responsibility-head p:not(.eyebrow){margin-top:26px;font-size:18px}.liquid-sign{position:relative;width:200px;min-width:180px;height:160px;align-self:center}.liquid-sign i{position:absolute;width:55px;height:120px;border-radius:45px;background:var(--orange);transform:rotate(35deg);animation:sign-life 5s ease-in-out infinite}.liquid-sign i:nth-child(2){left:55px;top:20px;animation-delay:-1.3s}.liquid-sign i:nth-child(3){left:110px;top:40px;animation-delay:-2.6s}.commitments{display:grid;grid-template-columns:repeat(3,1fr);margin-top:55px;gap:45px}.commitments article{border-top:1px solid #f8f5ed40;padding-top:25px;position:relative}.commitments article:after{content:'';position:absolute;left:0;top:-1px;width:100%;height:2px;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s}.commitments article:hover:after{transform:scaleX(1)}.commitments article>span{font-size:33px;font-weight:700;color:var(--orange);display:block;margin-bottom:14px}.commitments p{font-size:16px;margin-top:17px;color:#e0eaeb}.team-section{padding:95px 5.3% 65px}.team-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;margin-top:45px;align-items:center}.people{display:grid;grid-template-columns:1fr 1fr;gap:35px}.person-art{height:180px;position:relative;display:grid;place-items:center;background:#e7e5dc;border-radius:45% 55% 43% 57%;overflow:hidden;transition:border-radius .6s,transform .6s}.person-art:before{content:'';position:absolute;background:var(--orange);width:115px;height:220px;transform:rotate(35deg);right:-25px;top:30px;border-radius:70px}.person-art span{font-size:110px;line-height:1;font-weight:700;letter-spacing:-.08em;color:var(--petrol);z-index:1}.person-art.second{background:#dbe6e4}.person:hover .person-art{border-radius:55% 45% 58% 42%;transform:translateY(-7px)}.person h3{margin:20px 0 6px}.person p{font-size:14px}.team-copy>p{font-size:18px}.contact-blob{margin-top:32px;background:var(--orange);padding:35px 40px;border-radius:55px 75px 50px 65px;transition:border-radius .8s}.contact-blob:hover{border-radius:75px 50px 75px 45px}.contact-blob a{display:inline-block;margin-top:22px;padding:14px 21px;border-radius:30px;background:var(--petrol);color:white;text-decoration:none;font-size:14px}.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .85s cubic-bezier(.2,.7,.2,1)}.reveal.visible{opacity:1;transform:none}.hero-art{opacity:0;transition:opacity 1s}.hero-art.visible{opacity:1}.hero-art.visible .paper-art{animation:paper-enter 1.2s both}.hero-art.visible .brief-sheet{animation:brief-enter 1.4s both}@keyframes paper-enter{from{opacity:0;translate:-40px 55px;rotate:-12deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes brief-enter{from{opacity:0;translate:55px 40px;rotate:10deg}to{opacity:1;translate:0 0;rotate:0deg}}@keyframes glass-life{50%{translate:0 -8px}}@keyframes loop-life{50%{border-radius:40% 60% 40% 60%;rotate:5deg}}@keyframes sign-life{50%{translate:0 -13px;scale:.94 1.05}}a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:6px}
@media(min-width:1700px){main>section{padding-left:max(5.3%,calc((100vw - 1520px)/2));padding-right:max(5.3%,calc((100vw - 1520px)/2))}}
@media(max-width:900px){.site-nav nav{display:none}.site-nav img{width:95px}.agency-hero{padding-top:120px;grid-template-columns:1fr;gap:0}.hero-copy h1{width:auto}.intro{max-width:650px}.hero-art{width:80%;max-width:570px;justify-self:center;margin-top:40px}.film-layout{grid-template-columns:1fr;gap:30px}.film-cover{height:300px}.production-grid{gap:30px;grid-template-columns:1fr 1fr}.printer-photo{min-height:550px}.commitments{gap:25px}.team-layout{gap:35px}.liquid-sign{display:none}}
@media(max-width:600px){.agency-hero{padding:115px 6% 100px;min-height:0}.hero-copy h1{font-size:44px}.intro{font-size:16px}.hero-art{width:100%;height:380px}.paper-art{height:290px}.brief-sheet{height:245px;top:115px;padding:20px 15px}.brief-sheet strong{font-size:23px;margin:25px 0}.glass-sheet{height:110px}.art-label{font-size:11px;right:0;padding:14px 18px}.orange-loop{right:-310px}.film-section,.responsibility{padding:45px 6%}.film-cover{height:230px}.production-section{padding:65px 6% 105px}.production-grid{grid-template-columns:1fr;margin-top:28px}.printer-photo{min-height:370px}.material-photo{height:200px}.commitments{grid-template-columns:1fr;gap:28px;margin-top:35px}.commitments article>span{display:inline-block;margin-right:15px}.commitments h3{display:inline}.team-section{padding:60px 6%}.team-layout{grid-template-columns:1fr}.people{gap:22px}.person-art{height:145px}.person-art span{font-size:90px}.person h3{font-size:23px}.contact-blob{padding:30px}.production-copy p{font-size:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.reveal,.hero-art{opacity:1;transform:none}}
.agency-hero>.scroll-cue{bottom:55px;z-index:4}
/* Agency editorial revision: history, convictions, and people. */
.agency-hero{padding-bottom:130px}.hero-copy h1{width:140%;font-size:clamp(40px,4.5vw,68px)}.agency-story{max-width:570px}.agency-story p+p{margin-top:19px}.hero-art{align-self:center;margin-top:110px}.film-layout{display:flex;flex-direction:column;gap:30px;text-align:center}.film-copy{max-width:750px}.film-copy p:not(.eyebrow){margin:18px 0}.film-cover{width:min(100%,760px);height:auto;aspect-ratio:16/9;flex-shrink:0}.film-cover>img,.film-cover>video{object-fit:contain}.film-action{left:0;right:0;text-align:center}.film-section{padding-top:50px;padding-bottom:65px}.production-grid{grid-template-columns:1.1fr 1fr}.production-section h2{font-size:clamp(33px,3.7vw,56px)}.feed-line{display:none}.commitments{display:flex;flex-direction:column;gap:0;max-width:1100px;margin-top:45px}.commitments article{display:grid;grid-template-columns:80px 1fr;gap:25px;padding:30px 0}.commitments article>span{margin:0;font-size:38px}.commitments p{max-width:850px;font-size:18px;margin-top:14px}.sillon-link{display:inline-block;margin-top:20px;text-underline-offset:6px;color:#ff9d62}.responsibility-head{align-items:center}.responsibility-head p{max-width:660px}.team-layout{grid-template-columns:1.35fr 1fr;gap:8%;align-items:start}.team-editorial>p{font-size:18px}.people{margin:32px 0;gap:28px}.person{border-top:1px solid #193d4a35;padding-top:20px}.person-mark{font-size:42px;font-weight:700;letter-spacing:-.06em;color:#125469}.person h3{margin:10px 0}.agency-address{padding:26px 0;border-top:2px solid #125469}.agency-address>span{font-size:10px;letter-spacing:.15em;font-weight:700}.agency-address p{font-size:22px;margin:20px 0}.agency-address>a{font-size:22px;text-decoration:none}.team-copy .contact-blob{margin-top:20px}.team-heading h2{font-size:clamp(33px,3.8vw,58px)}
@media(max-width:900px){.hero-copy h1{width:auto}.hero-art{margin-top:45px}.production-grid{grid-template-columns:1fr 1fr}.team-layout{gap:35px}}
@media(max-width:600px){.hero-copy h1{font-size:42px}.agency-hero{padding-bottom:105px}.hero-art{margin-top:40px}.film-section{padding:35px 6% 45px}.film-cover{height:auto;aspect-ratio:16/9}.film-play{height:55px;width:55px;font-size:20px}.film-action{bottom:12px;font-size:12px}.production-grid,.team-layout{grid-template-columns:1fr}.commitments article{grid-template-columns:42px 1fr;gap:16px;padding:25px 0}.commitments article>span{font-size:29px}.commitments h3{display:block;font-size:24px}.commitments p,.team-editorial>p{font-size:16px}.people{gap:16px}.person h3{font-size:22px}.person p{font-size:12px}}
/* Flat petrol background with independent SVG ornaments. */
.film-cover>img,.film-cover>video{object-fit:cover}
.film-section{isolation:isolate;background:#125469}
.film-layout{position:relative;z-index:2}
.film-decor{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;pointer-events:none;z-index:0;fill:none;stroke:#a6dde1;stroke-opacity:.20;stroke-width:1.5}
.film-svg-left,.film-svg-right{transform-box:fill-box;transform-origin:center;animation:film-svg-drift 14s ease-in-out infinite}
.film-svg-right{animation-delay:-7s;animation-direction:reverse}
.film-svg-accent{stroke:#ff7526;stroke-opacity:.45;stroke-width:2}
@keyframes film-svg-drift{50%{transform:translateY(-18px) rotate(5deg)}}
@media(prefers-reduced-motion:reduce){.film-svg-left,.film-svg-right{animation:none}}
/* Print: the same illustration moves from a technical drawing to full colour. */
@media(min-width:901px){.production-copy>p{text-align:justify;hyphens:auto}}
.print-development{background-image:none;background-color:#f4f0e5;isolation:isolate}
.production-defs{position:absolute;width:0;height:0;overflow:hidden}
.print-sketch,.print-colour{position:absolute;inset:0;background-image:url(assets/agence-matieres.png);background-size:300% 100%;background-position:50% center;background-repeat:no-repeat}
.print-sketch{filter:url(#print-drawing);mix-blend-mode:multiply;opacity:.82}
.print-guides{position:absolute;inset:0;width:100%;height:100%;color:#125469;opacity:var(--drawing-guides,.35)}
.print-colour{clip-path:url(#print-colour-cut)}
.print-development:after{opacity:var(--print-finished,0)}
.print-development>span{opacity:var(--print-finished,0);transition:opacity .2s}
.material-photo{position:relative;overflow:hidden;opacity:var(--material-arrival,0)!important;transform:translateY(calc((1 - var(--material-arrival,0))*45px)) rotate(calc((1 - var(--material-arrival,0))*5deg))!important;transition:none!important;transform-origin:center}
.material-loupe{position:absolute;left:0;top:0;width:144px;height:144px;border-radius:50%;border:2px solid #f8f5eddd;box-shadow:0 5px 24px #09273355,0 0 0 1px #12546950;background-image:url(assets/agence-matieres.png);background-repeat:no-repeat;opacity:0;pointer-events:none;transition:opacity .2s;will-change:transform}
.material-photo.is-inspecting .material-loupe{opacity:1}
@media(prefers-reduced-motion:reduce){.print-colour{clip-path:none}.print-guides,.print-sketch{display:none}.print-development>span,.print-development:after,.material-photo{opacity:1!important;transform:none!important}}
/* A continuous drawing follows the three convictions. */
.conviction-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:6%;align-items:start;margin-top:40px}.conviction-layout .commitments{margin:0}.conviction-layout .commitments article{grid-template-columns:52px 1fr;gap:18px;padding:36px 0;min-height:295px}.conviction-layout .commitments p{font-size:17px}.conviction-visual{position:sticky;top:130px;align-self:start;padding-top:20px;--pointer-x:0deg;--pointer-y:0deg;perspective:900px}.choice-drawing{display:block;width:100%;overflow:visible;transform:rotateX(var(--pointer-y)) rotateY(var(--pointer-x));transition:transform .25s ease-out}.choice-lines{stroke:#ff7526;stroke-width:12}.choice-lines path:nth-child(2){stroke:#ff9c60;stroke-width:5}.choice-lines path:nth-child(3){stroke:#8fc4c9;stroke-width:2;opacity:.5}.choice-dots{color:#c4eeee;opacity:.3}.choice-node{filter:drop-shadow(0 0 8px #ff752688)}.choice-caption{display:flex;align-items:center;gap:18px;margin:0 12%;border-top:1px solid #ffffff26;padding-top:23px}.choice-index{font-size:30px;color:#ff7526;font-weight:700}.choice-word{font-size:16px;color:#f8f5ed}.conviction-layout article.is-current:after{transform:scaleX(1)}.responsibility-head p{max-width:850px}
@media(max-width:900px){.conviction-layout{grid-template-columns:1fr}.conviction-visual{position:relative;top:auto;max-width:450px;width:100%;margin:auto;grid-row:1}.conviction-layout .commitments article{min-height:0}.choice-caption{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.choice-drawing{transform:none!important}.choice-node{display:none}}
/* Clip decorative overflow without creating a scroll container around the sticky drawing. */
main{overflow:clip}
/* The drawing spans the title and all three paragraphs, including the last rest. */
.choice-caption{display:none}
@media(min-width:901px){
 .agency-story p,.production-copy>p,.commitments p,.team-editorial>p,.responsibility-head p:not(.eyebrow){text-align:justify;hyphens:auto}
 .responsibility{display:grid;grid-template-columns:1.1fr 1fr;column-gap:6%;row-gap:35px}
 .responsibility-head{grid-column:1;grid-row:1;display:block}
 .responsibility-head h2{font-size:clamp(36px,3.7vw,56px)}
 .conviction-layout{display:contents}
 .conviction-layout .commitments{grid-column:1;grid-row:2}
 .conviction-visual{grid-column:2;grid-row:1 / span 2;position:sticky;top:max(100px,calc(50svh - 220px));width:min(100%,440px);justify-self:center;align-self:start;padding:0}
}
/* Larger liquid passages between sections, isolated from the content. */
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 main>section>.liquid-edge{display:none}
 .agency-liquid-passage{position:relative;height:clamp(220px,32svh,330px);margin:0;overflow:hidden;pointer-events:none;isolation:isolate}
 .agency-liquid-passage svg{position:absolute;inset:-1px 0;width:100%;height:calc(100% + 2px);display:block}
 .agency-liquid-passage:after{content:'';position:absolute;bottom:-1px;height:3px;left:0;right:0;background:var(--next-tone)}
 .agency-hero{padding-bottom:70px}.agency-hero>.scroll-cue{bottom:10px}
 .film-section{padding-top:25px;padding-bottom:35px}
 .production-section{padding-top:25px;padding-bottom:45px}
 .responsibility{padding-top:25px;padding-bottom:35px}
 .team-section{padding-top:25px}
}
@media(max-width:900px),(prefers-reduced-motion:reduce){.agency-liquid-passage{display:none}}
/* Replace decorative separators with full-screen liquid hand-offs. */
.agency-liquid-passage{display:none!important}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){
 .agency-screen-passage{height:16svh;background:#f8f5ed;pointer-events:none}
 .agency-scene-held{will-change:clip-path}
 .film-section,.production-section,.responsibility,.team-section{padding-top:105px}
 .agency-hero{padding-bottom:100px;min-height:100svh}
 .film-section{min-height:100svh;display:flex;align-items:center;justify-content:center}
 .film-layout{width:100%}
 .agency-scene-placeholder{pointer-events:none}
}
@media(max-width:900px),(prefers-reduced-motion:reduce){.agency-screen-passage{display:none}}
@media(min-width:901px) and (prefers-reduced-motion:no-preference){.team-section{min-height:100svh}}