:root{
  --cream:#FBF5E6; --white:#FFFDF7; --sand:#F1E7CE;
  /* Couleurs relevées sur le logo : U’upa #C4D851 · Studio #B0C885 · texte #545E38 */
  --anis:#C4D851; --pastel:#B0C885; --pastel-bg:#DCE8C8; --olive:#545E38; --deep:#5D7A2B; --deeper:#474F2C;
  --yellow:#F6E59A; --yellow-2:#FBF0C4;
  --brown:#6B4A33; --ink:#2F3520;
  --f-sans:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-serif:'Fraunces','Georgia','Times New Roman',serif;
  --f-hand:'Caveat','Bradley Hand','Segoe Script',cursive;
  --f-brush:'Caveat Brush','Caveat','Segoe Script',cursive;
  --f-logo:'Abril Fatface','Bodoni Moda','Didot',serif;
  --gap:clamp(12px,1.8vw,28px);
  --pad:clamp(16px,3.6vw,56px);
  --wave:clamp(26px,4.4vw,64px);
}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:3px solid currentColor;outline-offset:4px}
p{margin:0}
h1,h2,h3{margin:0}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--pad)}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
.sec{position:relative}

/* Typographie */
.cond{font-family:var(--f-sans);font-weight:900;font-stretch:62%;text-transform:uppercase;line-height:.86;letter-spacing:0}
.ser{font-family:var(--f-serif);font-style:italic;font-weight:500;text-transform:none;letter-spacing:-.01em}
.hw{font-family:var(--f-hand);font-weight:600;line-height:1}
.mk{background:var(--anis);color:var(--ink);padding:0 .1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.ov{display:inline-block;font-family:var(--f-brush);font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:0;line-height:1;padding:.1em .42em .16em;background:var(--yellow);color:var(--ink);border-radius:52% 46% 54% 46% / 58% 54% 46% 42%;rotate:-5deg}
.circ{position:relative;display:inline-block;white-space:nowrap}
.circ svg{position:absolute;left:-8%;top:-14%;width:116%;height:130%;overflow:visible;pointer-events:none}
.circ path,.arr path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.circ path{stroke:currentColor;stroke-width:2.2}
.arr{display:block;overflow:visible}
.arr path{stroke:currentColor;stroke-width:1.8}
.spk{fill:currentColor;flex-shrink:0}

/* Boutons et étiquettes */
.btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--f-sans);font-weight:800;font-size:14px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;padding:16px 28px;border-radius:99px;border:2px solid var(--ink);transition:translate .25s ease,box-shadow .25s ease}
.btn:hover{translate:0 -3px;box-shadow:0 5px 0 var(--ink)}
.btn span{transition:translate .25s ease}
.btn:hover span{translate:5px 0}
.b-deep{background:var(--deep);color:var(--cream)}
.b-cream{background:var(--cream);color:var(--ink)}
.b-yellow{background:var(--yellow);color:var(--ink)}
.b-anis{background:var(--anis);color:var(--ink)}
.lnk{font-weight:700;text-underline-offset:6px;text-decoration-thickness:2px}
.tag{display:inline-block;font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;border:2px solid var(--ink);border-radius:99px;padding:6px 14px;background:var(--cream);color:var(--ink);line-height:1.3;transition:background .25s ease}
.tag:hover{background:var(--yellow);animation:jig .45s ease}
@keyframes jig{0%,100%{rotate:0deg}30%{rotate:-3deg}70%{rotate:3deg}}

/* Photos : placeholders neutres */
.frame{position:relative;overflow:hidden;width:100%;max-width:100%}
.frame>.par{position:absolute;left:0;right:0;top:-9%;height:118%}
.par>.ph{position:relative;width:100%;height:100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.frame:hover .ph{transform:scale(1.035)}
.ph::before{content:'';position:absolute;inset:0;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .11 0 0 0 0 .06 .9 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ph::after{content:'';position:absolute;inset:clamp(10px,1.2vw,16px);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 9V0H9M91 0H100V9M100 91V100H91M9 100H0V91' stroke='%2326301F' stroke-opacity='.4' stroke-width='1.5' vector-effect='non-scaling-stroke' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.frame::after{content:attr(data-label);position:absolute;left:clamp(12px,1.6vw,22px);bottom:clamp(12px,1.5vw,20px);z-index:3;font-family:var(--f-sans);font-weight:700;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:99px;padding:4px 10px;max-width:calc(100% - 28px)}
.c1 .ph{background-color:#E8DCC3}.c2 .ph{background-color:#D9CDB2}.c3 .ph{background-color:#F1E8D4}
.c4 .ph{background-color:#CFC4A9}.c5 .ph{background-color:#E2D6BC}.c6 .ph{background-color:#D6DBC2}.c7 .ph{background-color:#EEDFB0}
.r43{aspect-ratio:4/3}.r32{aspect-ratio:3/2}.r11{aspect-ratio:1/1}.r45{aspect-ratio:4/5}.r34{aspect-ratio:3/4}.r219{aspect-ratio:21/9}.r54{aspect-ratio:5/4}
.rd{border-radius:clamp(22px,2.8vw,42px)}
.arch{border-radius:999px 999px clamp(22px,2.8vw,42px) clamp(22px,2.8vw,42px)}
.circle{border-radius:50%}
.outl{border:2px solid var(--ink)}
.outl-c{border:2px solid var(--cream)}
.go{position:absolute;right:16px;top:16px;z-index:4;font-weight:800;font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:99px;padding:7px 14px;opacity:0;translate:0 -6px;transition:opacity .35s ease,translate .35s ease}
.frame:hover .go{opacity:1;translate:0 0}
.snap{position:relative;background:var(--white);padding:9px 9px 6px;border:1.5px solid rgba(38,48,31,.18);box-shadow:0 10px 22px rgba(38,48,31,.2);transition:rotate .5s ease,scale .5s ease}
.snap .frame::after{display:none}
.snap-c{padding:9px 4px 2px;font-size:clamp(20px,1.8vw,26px);color:var(--brown)}
.snap-s{padding:0 4px 6px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:rgba(38,48,31,.7)}
.snap:hover{rotate:0deg;scale:1.04}
.tape{position:absolute;width:96px;height:28px;background:rgba(236,214,150,.82);z-index:8;pointer-events:none;clip-path:polygon(3% 0,100% 0,97% 22%,100% 42%,97% 62%,100% 82%,98% 100%,0 100%,3% 80%,0 60%,3% 40%,0 20%)}
.person{display:block;width:100%;filter:drop-shadow(0 10px 14px rgba(38,48,31,.28))}
.plabel{position:absolute;left:clamp(10px,1.6vw,22px);bottom:calc(-1*clamp(16px,2vw,26px));z-index:6;display:flex;align-items:center;gap:12px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:20px;padding:10px 16px 10px 10px;rotate:-1.2deg;max-width:calc(100% - 20px);transition:rotate .3s ease}
.plabel:hover{rotate:0deg}
.pn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);font-weight:900;font-size:14px;flex-shrink:0}
.plabel b{display:block;font-weight:800;font-size:16px;line-height:1.1;letter-spacing:-.01em}
.plabel small{display:block;font-size:12px;color:rgba(38,48,31,.72);line-height:1.3;margin-top:3px}
.plabel .tag{padding:4px 10px;font-size:10.5px;background:var(--pastel)}

/* Header */
.hdr{position:sticky;top:0;z-index:50;background:var(--cream);border-bottom:2px solid var(--ink)}
.hdr-in{display:flex;align-items:center;justify-content:center;gap:24px;padding-block:16px}
.logo-t{display:inline-flex;align-items:center;text-decoration:none}
.logo-img{display:block;height:clamp(66px,calc(5vw + 20px),78px);width:auto;aspect-ratio:1/1;object-fit:contain}
.logo-t svg{width:.62em;height:.62em;color:var(--yellow);stroke:var(--ink);stroke-width:1.2px;paint-order:stroke}
.nav a{position:relative;z-index:0;text-decoration:none;font-weight:700;font-size:14px;letter-spacing:.05em;padding:8px 10px;isolation:isolate}
.nav a::before{content:'';position:absolute;inset:3px -8px;z-index:-1;background:var(--pastel);border-radius:50% 42% 56% 44% / 62% 50% 50% 38%;scale:1;rotate:-4deg;transition:rotate .3s ease,scale .3s ease}
.nav a:nth-child(1)::before{background:var(--anis)}
.nav a:nth-child(2)::before{background:var(--yellow);rotate:3deg}
.nav a:nth-child(3)::before{background:var(--pastel);rotate:-2deg}
.nav a:nth-child(4)::before{background:var(--anis);rotate:4deg}
.nav a:nth-child(5)::before{background:var(--yellow-2);rotate:-3deg}
.nav a.on::before{border:2px solid var(--ink)}
.mnav a.on{text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:7px;text-decoration-color:var(--anis)}
.nav a:hover::before{rotate:5deg;scale:1.08}
.nav .cta-n{border:2px solid var(--ink);border-radius:99px;padding:8px 20px;background:var(--cream);transition:background .25s ease}
.nav .cta-n::before{display:none}
.nav .cta-n:hover{background:var(--yellow)}
.burger{display:none;align-items:center;gap:10px;font-family:var(--f-sans);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;background:var(--yellow);border:2px solid var(--ink);color:var(--ink);border-radius:99px;padding:9px 18px;cursor:pointer}
.mnav a{display:block;text-decoration:none;font-family:var(--f-sans);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:48px;line-height:1;padding:12px 0;border-top:2px solid var(--ink);color:var(--deeper)}

/* Hero */
.hero{background:var(--deeper);color:var(--cream);padding-block:clamp(28px,3.4vw,56px) clamp(72px,9vw,140px);position:relative}
.hero-g{align-items:center;row-gap:40px}
.hero-l{grid-column:1/7;position:relative;z-index:3}
.hero-r{grid-column:7/13;position:relative;aspect-ratio:5/6;width:100%}
.hi{font-size:clamp(24px,2.6vw,36px);color:var(--anis);rotate:-2deg;display:inline-block}
.h1{display:block;position:relative;margin-top:10px;font-family:var(--f-logo);font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:-.01em;font-size:clamp(84px,11.6vw,176px);line-height:.9}
.h1 .l{display:block}
.h1 .u1{color:var(--anis)}
.h1 .u2{color:var(--pastel)}
.h1 .ov{position:absolute;right:3%;top:42%;font-size:.24em;z-index:4}
.stk{display:inline-flex;align-items:center;gap:8px;margin-top:30px;background:var(--yellow);border:2px solid var(--ink);border-radius:99px;padding:10px 20px;rotate:-2deg;font-weight:800;font-size:clamp(12px,1.2vw,15px);letter-spacing:.08em;text-transform:uppercase}
.stk i{font-family:var(--f-serif);font-weight:500;text-transform:none;letter-spacing:0;font-size:1.3em}
.lead{margin-top:22px;max-width:25em;font-size:clamp(17px,1.5vw,20px);font-weight:500;color:var(--cream)}
.acts{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px}
.hr-bk{position:absolute;right:0;top:7%;width:80%;height:91%;background:var(--pastel);border:3px solid var(--cream);border-radius:999px 999px 30px 30px}
.hr-person{position:absolute;top:13%;bottom:0;right:20%;width:auto;z-index:3}
.hr-person .person{height:100%;width:auto;max-width:none;aspect-ratio:640/1707}
.hr-snap{position:absolute;left:0;bottom:11%;width:30%;z-index:5;rotate:-6deg}
.hr-snap .ph::before,.hr-snap .ph::after{display:none}
.hr-mini{position:absolute;right:-1%;top:3%;width:24%;z-index:4}
.hr-badge{position:absolute;left:3%;top:0;width:31%;aspect-ratio:1;border-radius:50%;background:var(--white);z-index:6;rotate:-8deg;box-shadow:0 8px 18px rgba(38,48,31,.22);overflow:hidden}
.hr-badge img{display:block;width:100%;height:100%;object-fit:cover}
.hr-note{position:absolute;left:-3%;top:41%;z-index:6;width:32%;color:var(--anis)}
.hr-lab{position:absolute;left:auto;right:0;bottom:2.5%;translate:0 0;z-index:6;background:var(--white);border:2px solid var(--ink);border-radius:99px;padding:5px 12px;font-weight:700;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.sp1{position:absolute;right:-2%;top:46%;width:clamp(20px,2.6vw,38px);z-index:6;color:var(--anis)}
.sp2{position:absolute;left:36%;top:-1%;width:clamp(14px,1.8vw,26px);z-index:6;color:var(--yellow)}
.hero .hr-note{color:var(--anis)}
.hero .outl{border-color:var(--cream)}
.hero .lnk{color:var(--cream)}
.wv-b{position:absolute;left:0;bottom:-1px;width:100%;height:var(--wave);display:block;pointer-events:none}

/* Bandeaux */
.bands{background:var(--deep);border-block:2px solid var(--ink)}
.band{display:flex;overflow:hidden;padding-block:clamp(12px,1.6vw,22px)}
.band+.band{background:var(--yellow-2);border-top:2px solid var(--ink)}
.band:hover .mt{animation-play-state:paused}
.mt{display:flex;flex-shrink:0;align-items:center;gap:clamp(18px,2.4vw,40px);padding-right:clamp(18px,2.4vw,40px);animation:marq 80s linear infinite;white-space:nowrap;font-family:var(--f-sans);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(30px,4.6vw,64px);line-height:1;color:var(--cream)}
.mt em{font-style:normal;color:var(--yellow);font-stretch:100%;font-size:.7em}
.band+.band .mt{animation-direction:reverse;animation-duration:70s;color:var(--deeper)}
.band+.band .mt em{color:var(--deep)}
@keyframes marq{to{transform:translateX(-100%)}}

/* Deux univers */
.uni{background:var(--cream);padding-block:clamp(80px,10vw,150px) clamp(80px,11vw,170px)}
.uni-h{align-items:end;row-gap:24px}
.uni-t{grid-column:1/10;color:var(--deeper);font-size:clamp(54px,10.6vw,170px);position:relative}
.uni-s{grid-column:10/13;align-self:end;display:flex;flex-direction:column;gap:16px}
.ubs{margin-top:clamp(56px,7vw,110px);align-items:start;row-gap:clamp(80px,10vw,120px)}
.ub-a{grid-column:1/7}
.ub-b{grid-column:7/13;margin-top:clamp(60px,12vw,200px)}
.ub-ph{position:relative;width:100%}
.ub-a .ub-ph{width:86%;margin-left:7%;aspect-ratio:11/10}
.ub-b .ub-ph{aspect-ratio:5/4}
.ub-t{position:relative;z-index:4;color:var(--deeper);font-size:clamp(50px,8.2vw,128px)}
.ub-a .ub-t{font-size:clamp(38px,6.9vw,100px);margin-top:clamp(20px,2.4vw,34px);margin-left:7%;margin-right:3%}
.ub-b .ub-t{margin-bottom:clamp(18px,2.2vw,32px);text-align:right}
.ub-p{font-size:clamp(18px,1.6vw,22px);font-weight:500;line-height:1.35;max-width:21em;margin-top:22px}
.ub-b .ub-p{margin-left:auto}
.ub-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.ub-b .ub-tags{justify-content:flex-end}
.ub-go{margin-top:24px}
.ub-b .ub-go{text-align:right}
.ub-a .ub-snap{position:absolute;left:-8%;top:9%;width:36%;z-index:6;rotate:-6deg}
.ub-a .ub-mini{position:absolute;right:-6%;bottom:14%;width:27%;z-index:6}
.ub-a .ub-stk{position:absolute;left:2%;bottom:3%;z-index:7;rotate:-4deg}
.ub-b .ub-snap{position:absolute;right:-4%;bottom:-9%;width:30%;z-index:6;rotate:5deg}
.ub-b .ub-mini{position:absolute;left:-5%;top:-7%;width:22%;z-index:6}
.ub-b .ub-stk{position:absolute;left:3%;bottom:2%;z-index:7;rotate:-4deg}
.pill-s{display:inline-block;background:var(--yellow);border:2px solid var(--ink);border-radius:99px;padding:7px 15px;font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* Collage de tirages photo (Deux univers) */
.pr{position:absolute;margin:0;background:var(--white);padding:7px;box-shadow:0 8px 18px rgba(38,48,31,.22);transition:rotate .5s ease,scale .5s ease}
.pr img{display:block;width:100%;height:auto}
.pr figcaption{padding:6px 4px 0;font-size:clamp(18px,1.7vw,24px);line-height:1.1;color:var(--brown)}
.pr:hover{rotate:0deg;scale:1.03;z-index:8}
.pr-a{left:0;top:3%;width:84%;rotate:-3deg;z-index:2}
.pr-b{left:68%;top:33%;width:30%;rotate:5deg;z-index:4}
.pr-c{left:2%;top:3%;width:46%;rotate:-4deg;z-index:2}
.pr-d{left:44%;top:9%;width:34%;rotate:5deg;z-index:3}
.pr-e{right:4%;bottom:5%;width:25%;aspect-ratio:1;padding:5px;border-radius:50%;overflow:hidden;rotate:-3deg;z-index:5}
.pr-e img{height:100%;object-fit:cover;border-radius:50%}

/* Réalisations */
.pjs{background:var(--pastel-bg);color:var(--ink);padding-block:clamp(96px,12vw,180px) clamp(88px,11vw,170px)}
.pj-h{align-items:end;row-gap:24px}
.pj-t{grid-column:1/10;color:var(--deeper);font-size:clamp(54px,10.6vw,170px)}
.pj-s{grid-column:10/13;display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.pg{margin-top:clamp(56px,7vw,110px);align-items:start;row-gap:clamp(70px,8vw,120px)}
.pA{grid-column:1/8;grid-row:1;position:relative}
.pA .ph::before,.pA .ph::after,.pA .frame::after{display:none}
.pB{grid-column:9/13;grid-row:1;margin-top:clamp(40px,9vw,140px);rotate:3deg;z-index:2}
.pB .ph::before,.pB .ph::after,.pB .frame::after{display:none}
.pC{grid-column:1/5;grid-row:2;rotate:-4deg;z-index:2}
.pC .ph::before,.pC .ph::after,.pC .frame::after{display:none}
.pC .vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.pD{grid-column:5/9;grid-row:2;margin-top:clamp(24px,5vw,80px);position:relative}
.pD .ph::before,.pD .ph::after,.pD .frame::after{display:none}
.pD .frame{aspect-ratio:900/1553;overflow:visible}
.pD .ph{background-color:transparent}
.pE{grid-column:9/13;grid-row:2;position:relative}
.pE .ph::before,.pE .ph::after,.pE .frame::after{display:none}
.pE .pE-cut{display:none}
.pF{grid-column:1/13;grid-row:3;position:relative}
.pF .ph::before,.pF .ph::after,.pF .frame::after{display:none}
.pF .frame{aspect-ratio:1600/887;overflow:visible}
.pF .ph{background-color:transparent}
.pF .pF-cut{display:none}
.pE-cut{position:absolute;left:-18%;bottom:-6%;width:44%;z-index:5;rotate:-5deg}
.pF-cut{position:absolute;right:3%;top:-17%;width:clamp(90px,13vw,190px);z-index:5;rotate:4deg}
.pMe{position:absolute;left:50%;bottom:calc(100% + 32px);width:clamp(160px,20.8vw,300px);margin-left:calc(clamp(160px,20.8vw,300px) / -2);z-index:7;rotate:2deg;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(38,48,31,.28));-webkit-mask-image:linear-gradient(#000 86%,transparent 100%);mask-image:linear-gradient(#000 86%,transparent 100%)}
.pMe img{display:block;width:100%;height:auto}
@media (max-width:760px){.pMe{left:auto;right:4%;margin-left:0;width:36vw}}
.pF-stk{position:absolute;left:3%;top:-22px;z-index:6;rotate:-4deg}
.pj-all{margin-top:clamp(64px,8vw,120px);display:flex;justify-content:center}

/* À propos */
.abt{background:var(--sand);color:var(--ink);padding-block:clamp(96px,12vw,180px) clamp(88px,11vw,170px)}
.ab-g{align-items:start;row-gap:clamp(36px,5vw,64px)}
.ab-l{grid-column:1/8;grid-row:1}
.ab-t{font-size:clamp(46px,8.6vw,134px);margin-top:14px;color:var(--deeper)}
.ab-r{grid-column:8/13;grid-row:1/3;position:relative}
.ab-ph{position:relative;width:88%;margin-left:6%;aspect-ratio:3/4}
.scal{position:absolute;inset:0;width:100%;height:100%;fill:var(--anis);overflow:visible}
.ab-snap{position:absolute;left:-10%;bottom:6%;width:40%;z-index:6;rotate:-5deg}
.ab-note{position:absolute;right:-2%;top:-6%;z-index:7;width:34%;color:var(--deep)}
.ab-stk{position:absolute;right:-3%;bottom:10%;z-index:7;rotate:5deg}
.ab-tx{grid-column:1/7;grid-row:2;color:var(--ink)}
.ab-tx p{font-size:clamp(18px,1.6vw,21px);line-height:1.5;max-width:27em;font-weight:500}
.tl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 8px;margin-top:26px}
.tl .tag{background:var(--white)}
.tl .tag.last{background:var(--yellow)}
.sig{font-family:var(--f-hand);font-weight:600;font-size:clamp(44px,5vw,70px);line-height:1;margin-top:20px;rotate:-3deg;transform-origin:left;color:var(--brown)}

/* Clients */
.cls{background:var(--pastel);padding-block:clamp(96px,12vw,180px) clamp(88px,11vw,170px);text-align:center}
.cls-t{font-size:clamp(50px,9.6vw,152px);color:var(--deeper)}
.cls-s{margin:22px auto 0;max-width:30em;font-weight:500;font-size:clamp(17px,1.5vw,20px)}
.logos{margin-top:clamp(40px,5vw,72px);padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,18px)}
.lg{background:var(--cream);border:2px solid var(--ink);border-radius:clamp(18px,2vw,28px);height:clamp(84px,10vw,128px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(38,48,31,.6);transition:background .3s ease,rotate .3s ease,color .3s ease}
.lg b{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(18px,2vw,26px);letter-spacing:0;text-transform:none;color:var(--ink)}
.lg:hover{background:var(--yellow);rotate:-2deg;color:var(--ink)}

/* Contact */
.ct{background:var(--anis);padding-block:clamp(96px,12vw,180px) clamp(72px,9vw,130px);color:var(--deeper)}
.ct-g{align-items:center;row-gap:40px}
.ct-l{grid-column:1/10}
.ct-t{font-size:clamp(50px,10.6vw,172px)}
.ct-r{grid-column:10/13;position:relative;min-height:clamp(220px,28vw,400px)}
.ct-snap{position:absolute;right:0;top:0;width:90%;rotate:4deg;z-index:2}
.ct-mini{position:absolute;left:-6%;bottom:-6%;width:44%;z-index:3}
.ct-act{margin-top:clamp(32px,4vw,56px);display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.ct-act .btn{font-size:clamp(15px,1.4vw,18px);padding:22px 38px}
.ct-m{margin-top:clamp(48px,6vw,90px);display:flex;flex-wrap:wrap;gap:12px;color:var(--ink)}
.ct-m .tag{font-size:13px;text-transform:none;letter-spacing:.02em;padding:9px 18px}
.ct-m a.tag{text-decoration:none}

/* Footer */
.ft{background:var(--deeper);color:var(--cream);padding-block:clamp(48px,6vw,88px) 28px}
.ft-t{font-family:var(--f-logo);font-weight:400;font-stretch:100%;text-transform:none;font-size:clamp(56px,12vw,190px);color:var(--cream);line-height:.9}
.ft-r{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-top:28px}
.ft-s{display:flex;flex-wrap:wrap;gap:10px}
.ft-s a{text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--cream);border-radius:99px;padding:9px 18px;transition:background .25s ease,color .25s ease}
.ft-s a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.ft-b{margin-top:34px;padding-top:18px;border-top:2px solid rgba(251,244,228,.3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px;opacity:.85}
.ft-l{display:flex;flex-wrap:wrap;gap:6px 22px}
.ft-l a{text-decoration:none}
.ft-l a:hover{text-decoration:underline;text-underline-offset:4px}


/* Mots d’appui */
.dd{font-family:var(--f-logo);font-weight:400;font-stretch:100%;text-transform:none;letter-spacing:-.005em;line-height:1}

/* Intro (carte pastel à bord ondulé) */
.intro{background:var(--cream);padding-block:clamp(40px,5vw,72px) clamp(64px,8vw,120px)}
.in-card{position:relative;overflow:hidden;background:var(--pastel-bg);border-radius:clamp(28px,4vw,56px);padding:clamp(40px,6vw,88px) clamp(22px,6vw,110px) clamp(78px,9vw,130px);text-align:center}
.in-t{font-size:clamp(28px,4.3vw,62px);color:var(--deeper);max-width:19em;margin-inline:auto;line-height:1.08}
.in-s{margin-top:clamp(16px,2vw,26px);font-size:clamp(24px,2.6vw,38px);color:var(--deep);rotate:-2deg}
.in-w{position:absolute;left:0;bottom:-1px;width:100%;height:clamp(22px,3vw,40px);display:block}
.in-b{margin-top:clamp(28px,4vw,56px);align-items:center;row-gap:34px}
.in-m{grid-column:1/3;position:relative;rotate:-6deg}
.in-m .frame{box-shadow:0 0 0 5px var(--white),0 12px 24px rgba(38,48,31,.22)}
.in-m .frame::after,.in-m .ph::before,.in-m .ph::after{display:none}
.in-tx{grid-column:3/9}
.in-tx p+p{margin-top:1em}
.in-tx p{font-size:clamp(17px,1.4vw,19px);font-weight:500;max-width:29em}
.in-r{grid-column:9/13;position:relative;rotate:4deg}
.in-ov{position:absolute;left:9px;right:9px;top:9px;aspect-ratio:4/3;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.in-pair{display:flex;align-items:center;justify-content:center;height:82%}
.in-ph{height:100%;aspect-ratio:2/3;background:var(--white);padding:5px;box-shadow:0 2px 8px rgba(38,48,31,.2);rotate:-6deg}
.in-ph img{display:block;width:100%;height:100%;object-fit:cover}
.in-ph.b{height:92%;aspect-ratio:9/16;margin-left:-5%;rotate:5deg}
.in-cap{margin-top:6px;font-size:clamp(18px,1.6vw,23px);line-height:1;color:var(--brown);rotate:-2deg;white-space:nowrap}
.in-note{display:flex;align-items:center;gap:10px;margin-top:26px;color:var(--brown)}

/* Parcours (ligne verticale façon frise) */
.jny{background:var(--pastel-bg);padding-block:clamp(96px,12vw,170px) clamp(80px,10vw,150px)}
.jny-h{text-align:center;position:relative}
.jny-t{font-size:clamp(46px,7.4vw,112px);color:var(--deeper)}
.jny-t .hw{font-size:.42em;color:var(--deep);margin-left:.15em}
.jny-ar{position:absolute;right:clamp(0px,12vw,180px);top:-8%;color:var(--deeper);rotate:8deg}
.jl{max-width:1000px;margin:clamp(48px,6vw,90px) auto 0}
.je{display:grid;grid-template-columns:1fr clamp(34px,5vw,64px) 1fr;padding-bottom:clamp(40px,5vw,72px)}
.je:last-child{padding-bottom:0}
.je-dot{grid-column:2;grid-row:1;justify-self:center;width:2px;background:var(--ink);position:relative}
.je-dot::before{content:'';position:absolute;left:50%;top:8px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--anis);border:2px solid var(--ink)}
.je:last-child .je-dot::before{background:var(--yellow)}
.je-c{grid-row:1;grid-column:1;text-align:right;display:flex;flex-direction:column;align-items:flex-end}
.je:nth-child(even) .je-c{grid-column:3;text-align:left;align-items:flex-start}
.je-ph{width:min(260px,72%);margin-bottom:16px;rotate:-2deg}
.je:nth-child(even) .je-ph{rotate:2deg}
.je-y{display:flex;align-items:baseline;gap:12px;font-family:var(--f-sans);font-weight:900;font-stretch:62%;text-transform:uppercase;font-size:clamp(26px,2.6vw,36px);line-height:1;color:var(--deeper)}
.je-y .hw{font-stretch:100%;text-transform:none;font-size:1.15em;color:var(--deep)}
.je-t{margin-top:10px;max-width:21em;font-size:clamp(16px,1.3vw,18px);font-weight:500}
.je-now{margin-top:12px}

/* Vagues */
.wv{position:absolute;left:0;top:calc(-1*var(--wave) + 1px);width:100%;height:var(--wave);display:block;pointer-events:none}

/* Mouvement */
.up{animation:up 1.1s cubic-bezier(.2,.7,.2,1) both}
@keyframes up{from{opacity:.3;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes rv{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes clip{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-30px -30px -30px -30px)}}
@keyframes par{from{transform:translateY(-6%)}to{transform:translateY(6%)}}
@keyframes lnup{from{transform:translateY(108%)}to{transform:none}}
@keyframes drift{from{translate:0 24px}to{translate:0 -24px}}
@keyframes drawn{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes tw{0%,100%{scale:1;rotate:0deg}50%{scale:1.25;rotate:12deg}}
.spin{animation:spin 26s linear infinite}
.tw{animation:tw 3.4s ease-in-out infinite}
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .clip{animation:clip linear both;animation-timeline:view();animation-range:entry 0% entry 62%}
  .frame>.par{animation:par linear both;animation-timeline:view()}
  .ln>span{display:block;animation:lnup linear both;animation-timeline:view();animation-range:entry 5% entry 65%}
  .drift{animation:drift linear both;animation-timeline:view()}
  .circ path{animation:drawn linear both;animation-timeline:view();animation-range:entry 30% entry 90%}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}

/* Responsive */
@media (max-width:960px){
  .nav{display:none!important}
  .burger{display:inline-flex}
  .hero-l,.hero-r{grid-column:1/-1}
  .hero-r{max-width:560px;margin-inline:auto}
  .uni-t,.uni-s,.pj-t,.pj-s{grid-column:1/-1}
  .ub-a,.ub-b{grid-column:1/-1}
  .ub-b{margin-top:0}
  .ub-a .ub-ph{width:78%;margin-left:12%}
  .ub-a .ub-t{margin-left:12%}
  .ct-l,.ct-r{grid-column:1/-1}
  .ct-r{max-width:340px;margin-left:auto}
  .in-m{display:none}
  .in-tx{grid-column:1/-1}
  .in-r{grid-column:3/11}
}
@media (max-width:760px){
  .pA{grid-column:1/-1}
  .pB{grid-column:6/13;grid-row:2;margin-top:-10vw}
  .pC{grid-column:1/7;grid-row:3;margin-top:20px}
  .pD{grid-column:1/-1;grid-row:4;margin-top:0}
  .pE{grid-column:3/13;grid-row:5}
  .pE-cut{left:-10%;width:36%}
  .pF{grid-row:6}
  .pF-cut{width:96px;top:-12%}
  .r219{aspect-ratio:4/3}
  .ab-l,.ab-r,.ab-tx{grid-column:1/-1}
  .ab-r{grid-row:2;margin-top:20px}
  .ab-tx{grid-row:3}
  .ab-snap{left:-4%}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hr-note{display:none}
  .je{grid-template-columns:34px 1fr}
  .je-dot{grid-column:1}
  .je-c,.je:nth-child(even) .je-c{grid-column:2;text-align:left;align-items:flex-start;padding-left:10px}
  .jny-ar{display:none}
}
.trust{--u:clamp(60px,8.6vw,124px);margin-top:clamp(20px,2.4vw,34px);overflow:hidden}
.trust-t{display:block;text-align:center;font-size:clamp(44px,8.2vw,124px);line-height:.9;color:var(--deeper);margin:0 0 clamp(36px,4.6vw,68px);padding-inline:var(--pad)}
.trust-rail{display:flex;overflow:hidden}
.trust-rail:hover .trust-set{animation-play-state:paused}
.trust-set{display:flex;flex:0 0 auto;min-width:100%;align-items:center;justify-content:space-around;gap:clamp(40px,6vw,96px);padding-right:clamp(40px,6vw,96px);animation:marq 55s linear infinite}
.trust-s{margin:clamp(30px,3.6vw,52px) auto 0;max-width:none;width:auto;padding-inline:var(--pad);text-align:center;white-space:nowrap;font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(15px,1.9vw,28px);line-height:1.3;color:var(--deeper)}
@media (max-width:760px){.trust-s{white-space:normal;font-size:clamp(17px,4.6vw,22px)}}
.lgo{display:flex;align-items:center;flex:0 0 auto}
.lgo img{display:block;height:calc(var(--u) * var(--k,1.2));width:auto;max-width:none;object-fit:contain}
#top>*{flex-shrink:0}
.pjs{display:flex;flex-direction:column;flex:1 0 auto;padding-bottom:clamp(6px,.8vw,12px)}
.pjs>.trust{flex:1;display:flex;flex-direction:column;justify-content:center}

.ft{background:var(--deeper);color:var(--cream);padding-block:clamp(48px,6vw,88px) 28px}
.ft-t{font-family:var(--f-logo);font-weight:400;font-stretch:100%;text-transform:none;font-size:clamp(56px,12vw,190px);color:var(--cream);line-height:.9}
.ft-r{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 40px;margin-top:28px}
.ft-s{display:flex;flex-wrap:wrap;gap:10px}
.ft-s a{text-decoration:none;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--cream);border-radius:99px;padding:9px 18px;transition:background .25s ease,color .25s ease}
.ft-s a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.ft-b{margin-top:34px;padding-top:18px;border-top:2px solid rgba(251,244,228,.3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;font-size:13px;opacity:.85}
body{background:var(--deeper)}






/* ==COMMUNICATION== */
.cm>section{position:relative}
.cm .wrap{position:relative}
.cm-hero{background:var(--cream);padding-block:clamp(36px,5vw,76px) clamp(84px,10vw,150px);z-index:1}
.cm-ht{position:relative}
.cm-h1{font-size:clamp(44px,7.6vw,114px);line-height:.88;color:var(--deeper)}
.cm-h1 .ln,.cm-h2 .ln,.cm-h3 .ln,.cm-h4 .ln{padding-top:.16em;margin-top:-.12em}
.cm-h1 .mk{background:linear-gradient(var(--anis),var(--anis)) 0 54%/100% .8em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.cm-note{position:absolute;right:1%;top:2%;display:flex;align-items:center;gap:8px;color:var(--deep);font-size:clamp(24px,2.9vw,42px);rotate:-5deg}
.cm-hg{margin-top:clamp(8px,1.4vw,22px);align-items:center}
.cm-hl{grid-column:1/7;display:flex;flex-direction:column;gap:clamp(16px,1.8vw,26px);align-items:flex-start}
.cm-hr{grid-column:7/13}
.cm-lead{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(24px,2.5vw,36px);line-height:1.18;letter-spacing:-.01em;color:var(--deeper)}
.cm-lead .mk{font-style:italic}
.cm-p{font-size:clamp(17px,1.4vw,20px);line-height:1.62;max-width:29em}
.cm-col{position:relative;width:min(100%,440px);margin-left:auto;margin-right:clamp(0px,2vw,30px);aspect-ratio:9/16}
.cm-img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 14px 22px rgba(47,53,32,.28));rotate:1.5deg}
.cm-blob{position:absolute;inset:4% -12% -2% 12%;background:var(--pastel);border-radius:50% 50% 46% 54% / 56% 44% 56% 44%;rotate:5deg}
.cm-sa{position:absolute!important;right:2%;top:0;width:54%;z-index:1;box-shadow:0 14px 28px rgba(47,53,32,.25)}
.cm-sb{position:absolute!important;left:2%;bottom:0;width:42%;z-index:2;rotate:-5deg;box-shadow:0 12px 24px rgba(47,53,32,.25)}
.cm-sticker{position:absolute;left:-7%;top:4%;z-index:3;width:clamp(64px,8vw,104px);aspect-ratio:1;border-radius:50%;background:var(--anis);border:2px solid var(--ink);display:grid;place-items:center;rotate:-8deg}
.cm-play{width:46%;fill:var(--deeper)}
.cm-s1{position:absolute;right:6%;top:-3%;z-index:4}
.cm-s2{position:absolute;left:-3%;bottom:8%;z-index:4}
/* prestations */
.cm-svc{background:var(--sand);padding-block:clamp(70px,8vw,124px) clamp(80px,9vw,140px);z-index:2}
.cm-t2{position:relative}
.cm-h2{font-size:clamp(38px,7vw,104px);line-height:.9;color:var(--deeper)}
.cm-h2 .circ{padding-inline:.1em}
.cm-note2{display:flex;align-items:flex-start;gap:6px;color:var(--deep);font-size:clamp(22px,2.6vw,38px);rotate:-3deg;margin-top:clamp(14px,2vw,28px);margin-left:auto;width:max-content;max-width:100%}
.cm-note2 .arr{margin-top:.5em;width:clamp(34px,3.6vw,52px);height:auto}
.cm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,36px);margin-top:clamp(36px,4.6vw,70px);align-items:start}
.cm-c{position:relative;border:2px solid var(--ink);padding:clamp(34px,3.4vw,50px) clamp(22px,2.4vw,36px) clamp(32px,3.2vw,48px);box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.cm-c1{background:var(--pastel);border-radius:clamp(110px,13vw,190px) clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px);padding-top:clamp(64px,7vw,104px);rotate:-1deg;--b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23474F2C' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E")}
.cm-c2{background:var(--cream);border-radius:clamp(24px,2.6vw,38px);margin-top:clamp(30px,4.4vw,70px);rotate:1deg;--b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235D7A2B' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E")}
.cm-c3{background:var(--deeper);color:var(--cream);border-radius:clamp(24px,2.6vw,38px) clamp(110px,13vw,190px) clamp(24px,2.6vw,38px) clamp(24px,2.6vw,38px);margin-top:clamp(12px,2vw,30px);rotate:-.8deg;--b:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23C4D851' d='M12 0C13 7 17 11 24 12C17 13 13 17 12 24C11 17 7 13 0 12C7 11 11 7 12 0Z'/%3E%3C/svg%3E")}
.cm-n{position:absolute;right:clamp(14px,1.6vw,24px);top:clamp(4px,.6vw,10px);font-size:clamp(64px,7vw,104px);line-height:1;color:transparent;-webkit-text-stroke:2px currentColor;opacity:.32;pointer-events:none}
.cm-c1 .cm-n{color:var(--deeper)}
.cm-c2 .cm-n{color:var(--deep)}
.cm-c3 .cm-n{right:auto;left:clamp(14px,1.6vw,24px);color:var(--anis);opacity:.55}
.cm-c3 .cm-ct{margin-top:clamp(10px,1.4vw,22px)}
.cm-ct{font-size:clamp(32px,3.3vw,48px);line-height:.9;margin-bottom:clamp(18px,2vw,28px);position:relative;padding-top:clamp(20px,2.6vw,38px)}
.cm-c1 .cm-ct{color:var(--deeper)}
.cm-c2 .cm-ct{color:var(--deep)}
.cm-c3 .cm-ct{color:var(--anis)}
.cm-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:clamp(9px,1vw,13px);position:relative}
.cm-l li{position:relative;padding-left:30px;font-size:clamp(16px,1.2vw,18px);line-height:1.35;font-weight:600}
.cm-l li::before{content:'';position:absolute;left:0;top:.18em;width:18px;height:18px;background:var(--b) center/contain no-repeat}
.cm-after{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(12px,1.4vw,18px);margin-top:clamp(48px,6vw,92px)}
.cm-a1{font-family:var(--f-brush);font-size:clamp(34px,4.4vw,64px);line-height:1;color:var(--deeper)}
.cm-a2{font-size:clamp(17px,1.4vw,20px);line-height:1.6;max-width:30em;margin-bottom:clamp(8px,1vw,14px)}
/* réalisations */
.cm-real{background:var(--pastel-bg);padding-block:clamp(70px,8vw,124px) clamp(90px,10vw,150px);z-index:3}
.cm-t3{position:relative}
.cm-h3{font-size:clamp(34px,5.9vw,88px);line-height:.9;color:var(--deeper)}
.cm-h3 .mk{background:linear-gradient(var(--anis),var(--anis)) 0 54%/100% .8em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .08em}
.cm-note3{display:flex;align-items:center;gap:8px;color:var(--deep);font-size:clamp(22px,2.6vw,38px);rotate:-2deg;margin-top:clamp(14px,2vw,26px);width:max-content;max-width:100%}

/* mur de réalisations */
.cw{position:relative;width:100%;margin-top:clamp(60px,7vw,110px)}
.cw-i{position:absolute;margin:0;rotate:var(--r,0deg);transition:rotate .5s ease,translate .5s ease,box-shadow .5s ease;z-index:1}
.cw-i img{display:block;width:100%;height:auto}
.cw-poster{box-shadow:0 10px 24px rgba(47,53,32,.24)}
.cw-snap{background:var(--white);padding:clamp(6px,.8vw,12px) clamp(6px,.8vw,12px) clamp(20px,2.6vw,38px);box-shadow:0 12px 26px rgba(47,53,32,.26);border:1.5px solid rgba(38,48,31,.14)}
.cw-cut{filter:drop-shadow(0 10px 16px rgba(47,53,32,.28))}
.cw-i:hover{rotate:0deg;translate:0 -6px;z-index:6}
.cw-v{z-index:3}.cw-tea{z-index:2}.cw-dogs{z-index:4}.cw-noel{z-index:2}
.cw-vb{position:relative;width:100%;aspect-ratio:9/16;background:#000;overflow:hidden}
.cw-vp,.cw-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;background:#000}
.cw-vid{z-index:2}
.cw-play{all:unset;box-sizing:border-box;cursor:pointer;position:absolute;left:50%;top:50%;z-index:3;width:clamp(58px,6.4vw,92px);aspect-ratio:1;margin:calc(clamp(58px,6.4vw,92px) / -2) 0 0 calc(clamp(58px,6.4vw,92px) / -2);border-radius:50%;background:var(--anis);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;transition:scale .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease}
.cw-play svg{width:42%;height:42%;fill:var(--ink);margin-left:6%}
.cw-play:hover{scale:1.08;box-shadow:0 5px 0 var(--ink)}
.cw-play:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.cw-n{position:absolute;z-index:7;display:flex;align-items:flex-start;gap:4px;color:var(--deep);font-size:clamp(20px,2.4vw,34px);rotate:-4deg;white-space:nowrap}
.cw-n .arr{margin-top:.55em;width:clamp(30px,3.2vw,48px);height:auto;color:var(--deep)}
.cw-s1,.cw-s2{position:absolute;z-index:7;width:clamp(24px,3vw,44px);height:clamp(24px,3vw,44px);color:var(--deep)}
.cw-s2{color:var(--anis);width:clamp(18px,2.2vw,32px);height:clamp(18px,2.2vw,32px)}
@media (max-width:960px){
  .cw{aspect-ratio:auto!important;display:flex;flex-direction:column;gap:clamp(30px,7vw,52px);margin-top:clamp(44px,8vw,70px)}
  .cw-i{position:relative!important;left:auto!important;top:auto!important;width:var(--mw)!important;align-self:var(--al);order:var(--o)}
  .cw-n{position:relative!important;left:auto!important;top:auto!important;align-self:flex-start;order:var(--o);white-space:normal;font-size:clamp(22px,5vw,30px);margin-bottom:calc(-1*clamp(10px,3vw,24px))}
  .cw-n2{align-self:flex-end}
  .cw-s1,.cw-s2{display:none}
  .cw-i:hover{translate:none}
}
/* CTA */
.cm-cta{background:var(--cream);color:var(--deeper);padding-block:clamp(60px,7vw,110px) calc(var(--wave) + clamp(60px,8vw,120px));z-index:4}
.cm-bub{position:absolute;right:clamp(10px,5vw,90px);top:clamp(60px,7vw,120px);width:clamp(130px,17vw,250px);height:auto;fill:none;stroke:var(--deeper);stroke-width:5;stroke-linejoin:round;opacity:.2;rotate:8deg;pointer-events:none}
.cm-h4{font-size:clamp(36px,6.7vw,100px);line-height:.88;color:var(--deeper);position:relative}
.cm-o>span{color:transparent;-webkit-text-stroke:clamp(2px,.28vw,4px) var(--deeper)}
.cm-sub{font-family:var(--f-serif);font-style:italic;font-weight:500;font-size:clamp(22px,2.6vw,38px);line-height:1.18;max-width:20em;margin-top:clamp(28px,3.4vw,52px)}
.cm-btn{margin-top:clamp(26px,3vw,44px);font-size:clamp(13px,1.2vw,16px);padding:clamp(16px,1.6vw,22px) clamp(26px,2.8vw,44px)}
@media (max-width:960px){
  .cm-note{position:static;margin:clamp(16px,3vw,24px) 0 clamp(8px,2vw,14px);width:max-content;max-width:100%}
  .cm-hg{margin-top:clamp(14px,3vw,24px)}
  .cm-hl,.cm-hr{grid-column:1/-1}
  .cm-hr{margin-top:clamp(50px,9vw,80px)}
  .cm-col{width:min(78%,400px);margin-inline:auto}
  .cm-cards{grid-template-columns:1fr;gap:clamp(26px,5vw,40px)}
  .cm-c1,.cm-c2,.cm-c3{margin-top:0}
  .cm-c1{rotate:-.6deg}.cm-c2{rotate:.6deg}.cm-c3{rotate:-.4deg}
}
@media (max-width:560px){
  .cm-note,.cm-note3{font-size:22px}
  .cm-note2{margin-left:0;font-size:22px}
  .cm-bub{display:none}
  .cm-c{box-shadow:6px 6px 0 var(--ink)}
  .cm-btn,.cm-after .btn,.cm-hl .btn{width:100%;justify-content:space-between}
}
/* ==/COMMUNICATION== */