/* ===========================================================
   Instinct — pixel-exact rebuild of instinct.paris
   Desktop design canvas = 1024 wide; phone design canvas = 390 wide.
   Each canvas holds elements in TRUE design pixels, then is scaled
   as a whole to fit the screen (one screen, no scroll, like the live
   Readymag viewer). Font sizes are fixed px and scale with the canvas.
   =========================================================== */

@font-face {
  font-family: 'akira';
  font-weight: 700; font-style: normal; font-display: block;
  src: url('../fonts/akira-expanded.woff2') format('woff2');
}
@font-face {
  font-family: 'alegreya';
  font-weight: 400; font-style: normal; font-display: block;
  src: url('../fonts/alegreya-regular.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* visually hidden but readable by Google + screen readers (the page's single H1) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html, body { background: #fff; height: 100%; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
}
.canvas {
  position: relative;
  transform-origin: center center;
  background: #fff;
  flex: 0 0 auto;
}
.canvas.desktop { width: 1024px; height: 470px; }
.canvas.phone   { width: 390px;  height: 1010px; display: none; }

.w { position: absolute; color: #000; }

/* ---------- shared widget styles ---------- */
.logo img { width: 100%; height: auto; display: block; }
.slideshow { overflow: hidden; background:#fff; touch-action: pan-y; cursor: default; }
.slideshow:active { cursor: default; }
.slideshow .slide {
  position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: #fff;
  transform: translateX(100%);            /* position is driven inline by JS */
}
.slideshow.anim .slide { transition: transform 1s cubic-bezier(0.40,0.24,0.40,1); }
.poincon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.hd  { font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.body{ font-family:'alegreya',Georgia,serif; font-weight:400; text-align:justify; }
.links{ font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; }
.links .req { display:block; text-decoration: none; cursor:default; }
.links a.ig { display:block; text-decoration: underline; text-underline-offset:2px; }
.links a.ig:hover { opacity:.55; }
.contact .name{ position:absolute; font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.contact .role,.contact .mail{ position:absolute; font-family:'alegreya',Georgia,serif; font-weight:400; white-space:nowrap; }
.contact .mail:hover{ opacity:.55; }
.footer{ font-family:'alegreya',Georgia,serif; font-weight:400; text-align:right; }
.footer a{ text-decoration:underline; text-underline-offset:2px; }
.footer a:hover{ opacity:.55; }

/* ======================= DESKTOP (1024) =======================
   Content shifted up 244px to trim dead space (canvas is now 1024x470,
   a wide aspect that scales by width to fill the screen with margins). */
.desktop .logo      { left:49px;   top:14.3px;  width:192px; }
.desktop .slideshow { left:47px;   top:82.3px;  width:496px; height:302px; }
.desktop .poincon   { left:589.5px;top:185.3px; width:16px;  height:36px; }

.desktop .hd        { font-size:11px; line-height:20px; }
.desktop .hd-cd { left:587px; top:81.5px; }
.desktop .hd-tr { left:787px; top:81.5px; }
.desktop .hd-ep { left:587px; top:98.5px; }
.desktop .hd-pp { left:846px; top:98.5px; }   /* right-aligned to TALENT REPRESENTATION (ends ≈985) */

.desktop .body  { font-size:10px; line-height:13px; width:329px; }
.desktop .body-1{ left:638px; top:183.5px; }
.desktop .body-2{ left:638px; top:238.5px; }

/* Portfolio + social icons: "Portfolio on request" baseline sits on the image's
   bottom border line (image bottom ≈ 384px), icons row just under it. */
.desktop .links { left:587px; top:372px; font-size:11px; line-height:16px; }
.desktop .links .social { display:flex; gap:12px; margin-top:33px; }  /* icons on the contacts/footer baseline */
.links .social a { display:inline-flex; color:#000; }
.links .social a:hover { opacity:.55; }
.desktop .links .social svg { width:17px; height:17px; display:block; }

.desktop .contact .name { font-size:7px; line-height:9px; }
.desktop .contact .role,
.desktop .contact .mail { font-size:8px; line-height:10px; }
.desktop .c1 .name{top:418px} .desktop .c1 .role{top:429px} .desktop .c1 .mail{top:439px}
.desktop .c2 .name{top:418px} .desktop .c2 .role{top:429px} .desktop .c2 .mail{top:439px}
.desktop .c3 .name{top:418px} .desktop .c3 .role{top:429px} .desktop .c3 .mail{top:439px}
.desktop .c1 .name,.desktop .c1 .role,.desktop .c1 .mail{ left:47px; }
.desktop .c2 .name,.desktop .c2 .role,.desktop .c2 .mail{ left:212px; }
.desktop .c3 .name,.desktop .c3 .role,.desktop .c3 .mail{ left:376px; }

.desktop .footer{ left:638px; top:421px; width:329px; font-size:7px; line-height:10px; }

/* ======================= PHONE (fluid, scrollable) =======================
   Not a scaled fixed canvas anymore: a real flowing column. One gutter (28px)
   so logo, services, image and text all share the same left vertical border. */
.canvas.phone {
  width: 100%; max-width: 520px; height: auto; margin: 0 auto;
  padding: 56px 7.2% 64px;            /* gutter is a % so it scales with the column */
  container-type: inline-size;        /* lets children size in cqw (relative to THIS box) */
}
.phone .ph-head { display: flex; align-items: center; justify-content: space-between; }
.phone .ph-logo { display: block; width: 156px; }
.phone .ph-logo img { width: 100%; height: auto; display: block; }
.phone .ph-poincon { width: 20px; }   /* the "S" poinçon mark, top-right by the logo */
.phone .ph-poincon img { width: 100%; height: auto; display: block; }

/* services: same 2-column format as desktop, scaled by the column width (cqw) so the
   ratio is identical phone↔pc at any screen. Content-width columns spread left/right +
   nowrap = never wraps; 2.3cqw is the largest that still fits "TALENT REPRESENTATION".
   All horizontal values (gap, letter-spacing, gutter) are relative so the box width
   cancels out and one ratio holds from a 320px phone up to the 520px cap. */
/* two EQUAL columns (a box), col2 starts at 50% exactly like desktop (measured 50.3%).
   Different line lengths give the staircase. 2.6cqw is the biggest that still keeps
   "TALENT REPRESENTATION" inside its half-column without wrapping. */
.phone .ph-services {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: .55em;
  margin-top: 70px;
  font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 2.76cqw; line-height: 1.25; letter-spacing: .02em;   /* no-wrap ceiling for the box (breaks at ~2.8) */
  white-space: nowrap;
}
/* col2 (TALENT REPRESENTATION / POSTPRODUCTION) right-aligned: space before
   POSTPRODUCTION so its right edge reaches TALENT REPRESENTATION's. */
.phone .ph-services span:nth-child(2),
.phone .ph-services span:nth-child(4) { text-align: right; }

/* image box = the boundary; the artwork fits whole inside it (no crop) */
.phone .ph-slideshow {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  margin-top: 30px; overflow: hidden; background: #fff;
}

.phone .ph-body {
  margin-top: 36px;
  font-family: 'alegreya', Georgia, serif; font-weight: 400;
  font-size: 14.5px; line-height: 1.6; text-align: left;
}
.phone .ph-body p + p { margin-top: 22px; }

.phone .ph-links { margin-top: 45px; }   /* phone-only: Portfolio raised 5px */
.phone .ph-links .req {
  display: block;
  font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: .2px;
}
.phone .ph-social { display: flex; gap: 18px; margin-top: 28px; }  /* phone-only: icons lowered 10px */
.phone .ph-social a { display: inline-flex; color: #000; }
.phone .ph-social a:hover { opacity: .55; }
.phone .ph-social svg { width: 24px; height: 24px; display: block; }

.phone .ph-team { margin-top: 44px; display: flex; flex-direction: column; gap: 24px; }
.phone .ph-person .nm { font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 11px; line-height: 1.3; }
.phone .ph-person .rl { font-family: 'alegreya', Georgia, serif; font-size: 13.5px; line-height: 1.4; margin-top: 4px; }
.phone .ph-person .ml { font-family: 'alegreya', Georgia, serif; font-size: 13.5px; line-height: 1.4; display: inline-block; }
.phone .ph-person .ml:hover { opacity: .55; }

.phone .ph-footer {
  margin-top: 48px;
  font-family: 'alegreya', Georgia, serif; font-size: 13px; line-height: 1.5; text-align: left;
}
.phone .ph-footer a { text-decoration: underline; text-underline-offset: 2px; }
.phone .ph-footer a:hover { opacity: .55; }

/* ===================== legal mentions page ===================== */
.legal-wrap{ max-width:720px; margin:0 auto; padding:80px 28px 110px; font-family:'alegreya',Georgia,serif; font-size:15px; line-height:1.6; color:#000; }
.legal-wrap .legal-logo{ display:inline-block; width:190px; margin-bottom:46px; }
.legal-wrap .legal-logo img{ width:100%; height:auto; display:block; }
.legal-wrap h1{ font-family:'akira',sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; margin-bottom:4px; }
.legal-wrap .updated{ font-style:italic; color:#666; margin-bottom:30px; }
.legal-wrap h2{ font-family:'akira',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; margin:26px 0 7px; }
.legal-wrap p{ margin-bottom:11px; }
.legal-wrap .back{ display:inline-block; margin-top:44px; font-family:'akira',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }