@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/dm-sans-latin.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('fonts/manrope-latin.woff2') format('woff2'); }

:root {
  --ink: #261c3e;
  --night: #211831;
  --deep: #312450;
  --violet: #5e42a6;
  --indigo: #5052b5;
  --pink: #b74e91;
  --paper: #f7f5fa;
  --white: #fff;
  --muted: #655d75;
  --line: rgba(49, 36, 80, .16);
  --page-width: 1380px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.7 'DM Sans', Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, summary, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 5px; }
::selection { background: var(--pink); color: white; }
.container { width: min(calc(100% - 112px), var(--page-width)); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 300; padding: 12px 18px; background: white; color: var(--ink); }
.skip-link:focus { top: 16px; }
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 3px; background: linear-gradient(90deg, var(--indigo), var(--pink)); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* Navigation */
.site-header { position: fixed; inset: 0 0 auto; z-index: 100; height: 86px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(28px, 4vw, 80px); color: white; background: rgba(33, 24, 49, .76); border-bottom: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background .3s; }
.site-header.is-scrolled { background: rgba(33, 24, 49, .96); }
.brand { display: inline-flex; align-items: center; gap: 12px; font: 800 14px/1.06 Manrope, sans-serif; letter-spacing: .13em; flex-shrink: 0; }
.brand-mark { width: 40px; height: 40px; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(80, 82, 181, .45)); transition: transform .4s cubic-bezier(.2,.65,.2,1); }
.brand:hover .brand-mark { transform: scale(1.08) rotate(-6deg); }
.site-nav { display: flex; align-items: center; gap: clamp(16px, 2vw, 33px); font-size: 12px; font-weight: 700; letter-spacing: .035em; }
.site-nav > a:not(.nav-contact) { color: rgba(255,255,255,.75); transition: color .25s; white-space: nowrap; }
.site-nav > a:not(.nav-contact):hover, .site-nav > a:not(.nav-contact)[aria-current="location"] { color: white; }
.nav-contact { display: inline-flex; align-items: center; gap: 22px; border: 1px solid rgba(255,255,255,.55); border-radius: 100px; padding: 10px 16px 10px 19px; white-space: nowrap; transition: color .25s, background .25s, border-color .25s; }
.nav-contact:hover { color: var(--ink); background: white; border-color: white; }
.nav-contact span { font-size: 17px; font-weight: 400; }
.menu-toggle { display: none; }

/* Shared editorial elements */
.section { padding: clamp(100px, 10vw, 168px) 0; position: relative; }
.eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 24px; color: var(--violet); font-size: 11px; font-weight: 800; line-height: 1.3; letter-spacing: .19em; text-transform: uppercase; }
.eyebrow-line { display: inline-block; width: 26px; height: 1px; flex-shrink: 0; background: currentColor; }
.section-heading { margin-bottom: 68px; }
h2, h3 { text-wrap: balance; }
.section-heading h2, .services-intro h2, .contact-main h2 { margin: 0; font: 800 clamp(58px, 7.7vw, 128px)/.99 Manrope, sans-serif; letter-spacing: -.075em; }
h1 em, h2 em { font-style: normal; color: var(--pink); }
.section-lead { max-width: 570px; margin: 29px 0 0; color: var(--muted); font-size: clamp(17px, 1.7vw, 22px); line-height: 1.5; }
.section-heading-light, .section-heading-light .eyebrow { color: white; }
.section-heading-light .section-lead { color: rgba(255,255,255,.65); }
.button { position: relative; min-height: 54px; display: inline-flex; justify-content: space-between; align-items: center; gap: 30px; padding: 13px 21px 13px 24px; border-radius: 100px; font-size: 13px; font-weight: 700; line-height: 1.3; transition: transform .25s, background .25s, color .25s; }
/* Zone de survol étendue : couvre le lift de 3px au hover + les 7px max du magnétisme, sinon le bouton s'échappe sous le curseur. */
.button::before { content: ''; position: absolute; inset: -10px; border-radius: inherit; }
/* Magnétisme : JS écrit --mag-x/--mag-y, `translate` reste indépendant du `transform` de hover. */
[data-magnetic] { translate: var(--mag-x, 0px) var(--mag-y, 0px); will-change: translate; }
[data-magnetic].is-resting { transition: translate .5s cubic-bezier(.2,.65,.2,1); }
.button:hover { transform: translateY(-3px); }
.button span { font-size: 19px; font-weight: 400; }
.button-light { color: var(--ink); background: white; }
.button-light:hover { background: #e9d5f3; }
.button-dark { color: white; background: var(--ink); }
.button-dark:hover { background: var(--violet); }

/* Hero */
.hero { min-height: min(880px, 100svh); padding: 145px 0 94px; position: relative; isolation: isolate; overflow: hidden; color: white; background: radial-gradient(circle at 75% 44%, #573a8e 0, #32244d 35%, var(--night) 76%); }
/* Champ d'étoiles : pattern CSS par défaut ; remplacé par le canvas quand le JS l'a activé (.has-stars). */
.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .29; background-image: radial-gradient(circle, white 1px, transparent 1.5px); background-size: 85px 85px; mask-image: linear-gradient(100deg, transparent 20%, black 100%); -webkit-mask-image: linear-gradient(100deg, transparent 20%, black 100%); }
.hero.has-stars::before { display: none; }
.hero-stars { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: none; pointer-events: none; mask-image: linear-gradient(100deg, transparent 12%, black 70%); -webkit-mask-image: linear-gradient(100deg, transparent 12%, black 70%); }
.hero.has-stars .hero-stars { display: block; }
.hero-glow { position: absolute; width: 700px; height: 700px; right: -270px; top: -310px; border-radius: 50%; background: radial-gradient(circle, rgba(183,78,145,.27), transparent 68%); pointer-events: none; }
/* Halo qui suit le curseur (desktop uniquement, voir JS). */
.hero-cursor-glow { position: absolute; left: 0; top: 0; z-index: 0; width: 640px; height: 640px; border-radius: 50%; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle, rgba(183,78,145,.32) 0%, rgba(94,66,166,.18) 35%, transparent 70%); transform: translate(calc(var(--px, 0px) - 50%), calc(var(--py, 0px) - 50%)); transition: opacity .6s; }
.hero.is-hovered .hero-cursor-glow { opacity: 1; }
/* Parallaxe : chaque couche se décale via `translate` (indépendant de ses rotate/animations). */
.hero [data-depth] { translate: calc(var(--mx, 0) * var(--depth, 1) * 10px) calc(var(--my, 0) * var(--depth, 1) * 10px); }
.hero-photo-back { --depth: 1.4; } .hero-photo-front { --depth: -.8; } .hero-logo { --depth: .6; }
.hero-copy { translate: calc(var(--mx, 0) * -3px) calc(var(--my, 0) * -3px); }
.hero-orbit-one, .hero-planet-a, .hero-planet-b { translate: calc(var(--mx, 0) * 22px) calc(var(--my, 0) * 22px); }
.hero-orbit-two, .hero-planet-c { translate: calc(var(--mx, 0) * -14px) calc(var(--my, 0) * -14px); }
.hero-inner { display: grid; grid-template-columns: 52% 48%; align-items: center; min-height: 570px; position: relative; }
.hero-copy { position: relative; z-index: 3; padding: 25px 0 60px; }
.hero-eyebrow { color: #d9c6ee; margin-bottom: 27px; }
.hero h1 { max-width: 790px; margin: 0; font: 800 clamp(62px, 6.2vw, 110px)/1.04 Manrope, sans-serif; letter-spacing: -.079em; }
.hero h1 em { color: #e7a0c9; }
.hero-intro { max-width: 490px; margin: 35px 0; font-size: clamp(16px, 1.35vw, 19px); line-height: 1.65; color: rgba(255,255,255,.72); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.5); padding: 5px 0; transition: gap .25s; }
.text-link:hover { gap: 20px; }
.hero-visual { height: min(640px, 54vw); min-height: 475px; position: relative; transform: translateX(2%); }
.hero-photo { position: absolute; z-index: 2; margin: 0; overflow: hidden; box-shadow: 0 28px 90px rgba(11,9,26,.48); }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.hero-photo:hover img { transform: scale(1.05); }
.hero-photo-back { width: 48%; height: 59%; top: 3%; right: 3%; transform: rotate(8deg); border: 8px solid #eadff2; }
.hero-photo-front { width: 60%; height: 68%; bottom: 7%; left: 1%; transform: rotate(-8deg); border: 9px solid white; }
.hero-photo-front img { object-position: 50% 40%; }
.hero-logo { display: block; position: absolute; width: min(42%, 260px); right: 3%; bottom: -5%; z-index: 0; filter: drop-shadow(0 12px 15px rgba(18,11,31,.45)); }
.hero-logo img { width: 100%; height: auto; }
.hero-orbit { position: absolute; border: 1px solid rgba(255,255,255,.13); border-radius: 50%; pointer-events: none; }
.hero-orbit-one { width: 105%; aspect-ratio: 1; left: -5%; top: -14%; animation: breathe 8s ease-in-out infinite alternate; }
.hero-orbit-two { width: 75%; aspect-ratio: 1; left: 10%; top: 0; animation: breathe 10s ease-in-out infinite alternate-reverse; }
/* Planètes en orbite : chaque boîte .hero-planet reproduit la géométrie (taille, position, breathe, parallaxe) de son anneau,
   un bras tourne autour du centre et la planète contre-tourne pour garder son éclairage. Les planètes restent toujours
   devant le logo mais derrière les photos. */
.hero-planet { position: absolute; aspect-ratio: 1; z-index: 1; pointer-events: none; }
.hero-planet-a, .hero-planet-b { width: 105%; left: -5%; top: -14%; }
.hero-planet-c { width: 75%; left: 10%; top: 0; }
.hero-planet-a { --planet-size: 46px; --orbit-duration: 38s; --orbit-delay: -4s; animation: breathe 8s ease-in-out infinite alternate; }
.hero-planet-b { --planet-size: 30px; --orbit-duration: 26s; --orbit-delay: -15s; animation: breathe 8s ease-in-out infinite alternate; }
.hero-planet-c { --planet-size: 36px; --orbit-duration: 20s; --orbit-delay: -16s; animation: breathe 10s ease-in-out infinite alternate-reverse; }
.hero-planet-arm { position: absolute; inset: 0; animation: hero-orbit-spin var(--orbit-duration) linear var(--orbit-delay) infinite; }
.hero-planet-c .hero-planet-arm, .hero-planet-c .planet { animation-direction: reverse; }
.hero-planet .planet { position: absolute; left: 100%; top: 50%; translate: -50% -50%; opacity: 1; transform: none; filter: none; transition: none; box-shadow: inset calc(var(--planet-size) * -.16) calc(var(--planet-size) * -.14) calc(var(--planet-size) * .3) rgba(20,10,45,.55), 0 0 24px var(--glow); animation: hero-orbit-counter var(--orbit-duration) linear var(--orbit-delay) infinite; }
.hero-planet .planet-1::before, .hero-planet .planet-1::after { border-width: 2px; }
.hero-planet .planet-2 { background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0, transparent 22%), repeating-linear-gradient(-12deg, #d178b3 0 calc(var(--planet-size) * .1), #b74e91 calc(var(--planet-size) * .1) calc(var(--planet-size) * .19), #8c3570 calc(var(--planet-size) * .19) calc(var(--planet-size) * .25), #c25f9d calc(var(--planet-size) * .25) calc(var(--planet-size) * .35)); }
.hero-planet .planet-3::after { box-shadow: 0 0 6px rgba(255,255,255,.35); }
@keyframes hero-orbit-spin { to { transform: rotate(360deg); } }
@keyframes hero-orbit-counter { to { rotate: -360deg; } }
.scroll-cue { position: absolute; left: max(56px, calc((100vw - var(--page-width)) / 2)); bottom: 42px; display: flex; align-items: center; gap: 13px; color: rgba(255,255,255,.74); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.scroll-cue-line { display: inline-block; width: 31px; height: 1px; background: currentColor; }
.hero-index { position: absolute; right: 4vw; bottom: 40px; color: rgba(255,255,255,.74); font-size: 11px; letter-spacing: .12em; }

/* Values : planètes (onglets) à gauche, panneau de la valeur active à droite. */
.values-section { background: var(--paper); padding-block: clamp(64px, 6vw, 96px); overflow: hidden; }
.values-section .section-heading { margin-bottom: clamp(28px, 3vw, 40px); }
.values-section .section-heading h2 { font-size: clamp(54px, 6.4vw, 104px); }
.values-section .section-lead { margin-top: 20px; }
.values-explorer { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(32px, 5vw, 90px); align-items: center; border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); }
.planet-nav { position: relative; display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 20px); padding-left: 6px; }
/* Fil d'orbite reliant les planètes. */
.planet-nav::before { content: ''; position: absolute; left: calc(6px + var(--planet-size, 88px) / 2); top: 36px; bottom: 36px; width: 1px; background: linear-gradient(180deg, transparent, var(--line) 15%, var(--line) 85%, transparent); pointer-events: none; }
.planet-tab { --planet-size: 88px; position: relative; display: flex; align-items: center; gap: 22px; width: 100%; padding: 4px 10px 4px 0; margin: 0; border: 0; border-radius: 100px; background: none; color: var(--muted); text-align: left; cursor: pointer; transition: color .35s; }
.planet-tab:hover, .planet-tab[aria-selected="true"] { color: var(--ink); }
.planet-tab:focus-visible { outline-offset: 2px; }
.planet-label { display: flex; flex-direction: column; gap: 4px; font: 800 clamp(15px, 1.3vw, 19px)/1.2 Manrope, sans-serif; letter-spacing: -.03em; }
.planet-index { color: var(--pink); font: 800 11px/1 'DM Sans', sans-serif; letter-spacing: .14em; }
/* Sphères CSS : lumière en haut à gauche, terminateur en bas à droite. */
.planet { position: relative; flex-shrink: 0; width: var(--planet-size); height: var(--planet-size); border-radius: 50%; isolation: isolate; opacity: .72; transform: scale(.84); filter: saturate(.75); transition: opacity .5s, transform .5s cubic-bezier(.2,.65,.2,1), filter .5s, box-shadow .5s; }
.planet::before, .planet::after { content: ''; position: absolute; border-radius: 50%; pointer-events: none; }
.planet-1 { --glow: rgba(94,66,166,.55); background: radial-gradient(circle at 32% 28%, #c9b4ec 0, #7a5cc8 28%, #5e42a6 55%, #2c1d55 100%); box-shadow: inset -14px -12px 26px rgba(20,10,45,.55), 0 0 0 var(--glow); }
/* Anneau : ellipse inclinée, passage derrière la sphère simulé par un masque dégradé. */
.planet-1::before { inset: 28% -32%; border: 3px solid rgba(231,160,201,.9); border-radius: 50%; transform: rotate(-22deg); -webkit-mask-image: linear-gradient(180deg, transparent 0 46%, black 54%); mask-image: linear-gradient(180deg, transparent 0 46%, black 54%); }
.planet-1::after { inset: 28% -32%; border: 3px solid rgba(231,160,201,.55); border-radius: 50%; transform: rotate(-22deg); z-index: -1; }
.planet-2 { --glow: rgba(183,78,145,.55); background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.85) 0, transparent 22%), repeating-linear-gradient(-12deg, #d178b3 0 9px, #b74e91 9px 17px, #8c3570 17px 22px, #c25f9d 22px 31px); box-shadow: inset -16px -14px 30px rgba(50,12,40,.6), inset 8px 8px 20px rgba(255,255,255,.14), 0 0 0 var(--glow); }
.planet-2::before { width: 26%; height: 16%; left: 54%; top: 56%; background: radial-gradient(circle at 40% 40%, #f3c6df, #c25f9d); box-shadow: inset -3px -2px 6px rgba(60,10,45,.5); transform: rotate(-12deg); }
.planet-3 { --glow: rgba(80,82,181,.55); background: radial-gradient(circle at 30% 28%, #b9c0ff 0, #6f72d8 30%, #5052b5 55%, #262a6b 100%); box-shadow: inset -14px -12px 26px rgba(14,16,60,.6), 0 0 0 var(--glow); }
.planet-3::before { width: 18%; height: 18%; left: 20%; top: 58%; background: radial-gradient(circle at 35% 35%, #4a4caf, #22245e); box-shadow: inset -2px -2px 4px rgba(10,10,40,.6); }
/* Lune en orbite autour de la planète 3. */
.planet-3::after { width: 22%; height: 22%; left: 39%; top: 39%; background: radial-gradient(circle at 35% 35%, #fbeaf4, #c9a6c7 60%, #8c6f93); box-shadow: 0 0 10px rgba(255,255,255,.35); transform: rotate(0deg) translateX(calc(var(--planet-size) * .68)); animation: orbit 9s linear infinite; }
.planet-tab:hover .planet { opacity: .9; transform: scale(.92); filter: saturate(.9); }
.planet-tab[aria-selected="true"] .planet { opacity: 1; transform: scale(1); filter: saturate(1); box-shadow: inset -14px -12px 26px rgba(20,10,45,.55), 0 0 44px var(--glow), 0 18px 40px rgba(38,28,62,.18); }
.planet-tab[aria-selected="true"] .planet-2 { box-shadow: inset -16px -14px 30px rgba(50,12,40,.6), inset 8px 8px 20px rgba(255,255,255,.14), 0 0 44px var(--glow), 0 18px 40px rgba(38,28,62,.18); }
.planet-tab[aria-selected="true"] .planet-3 { box-shadow: inset -14px -12px 26px rgba(14,16,60,.6), 0 0 44px var(--glow), 0 18px 40px rgba(38,28,62,.18); }
.planet-tab:not([aria-selected="true"]) .planet-3::after { animation-duration: 22s; }
/* Panneau : carte blanche inclinable (tilt 3D piloté par --rx/--ry) avec spotlight clair. */
/* Les panneaux se superposent dans la même cellule : hauteur stable quel que soit le texte actif. */
.value-panels { display: grid; perspective: 1400px; }
.value-panel { grid-area: 1 / 1; position: relative; padding: clamp(26px, 2.8vw, 40px) clamp(28px, 3.4vw, 54px); background: white; border: 1px solid var(--line); box-shadow: 0 30px 70px rgba(38,28,62,.08); transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out, box-shadow .4s; }
.value-panel.is-resting { transition: transform .7s cubic-bezier(.2,.65,.2,1), box-shadow .4s; }
.value-panels:hover .value-panel { box-shadow: 0 40px 90px rgba(38,28,62,.14); }
.value-panel[data-spotlight]::after { background: radial-gradient(460px circle at var(--sx, 50%) var(--sy, 50%), rgba(94,66,166,.09), transparent 60%); }
/* Les panneaux inactifs restent dans le flux (hauteur) mais invisibles et inertes. */
html.js .value-panel[hidden] { display: block; visibility: hidden; pointer-events: none; }
.value-number { display: block; margin-bottom: 16px; color: var(--pink); font-size: 12px; font-weight: 800; letter-spacing: .12em; }
.value-panel h3 { margin: 0 0 16px; font: 800 clamp(26px, 2.6vw, 40px)/1.14 Manrope, sans-serif; letter-spacing: -.045em; }
.value-panel p { max-width: 720px; margin: 0; color: var(--muted); font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.75; }
/* Dépliage au changement de valeur : le panneau se révèle de haut en bas, le texte suit. */
html.has-motion .value-panel.is-entering { animation: panel-in .6s cubic-bezier(.2,.65,.2,1) both; }
html.has-motion .value-panel.is-entering > * { animation: panel-text-in .55s cubic-bezier(.2,.65,.2,1) both; }
html.has-motion .value-panel.is-entering > h3 { animation-delay: .1s; }
html.has-motion .value-panel.is-entering > p { animation-delay: .18s; }
@keyframes panel-in { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@keyframes panel-text-in { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes orbit { to { transform: rotate(360deg) translateX(calc(var(--planet-size) * .68)); } }
/* Sans JS : toutes les valeurs restent lisibles, empilées, sans onglets. */
html:not(.js) .planet-nav { display: none; }
html:not(.js) .values-explorer { grid-template-columns: 1fr; }
html:not(.js) .value-panels { gap: 20px; }
html:not(.js) .value-panel { display: block !important; grid-area: auto; }

/* Audiences : 4 cartes côte à côte, texte replié derrière « En savoir plus » pour tenir sur un écran. */
.audiences-section { color: white; background: var(--deep); overflow: hidden; padding-block: clamp(48px, 4vw, 64px); }
.audiences-section::before { content: ''; position: absolute; right: -300px; top: 80px; width: 700px; height: 700px; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); pointer-events: none; }
.audiences-section .section-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; column-gap: clamp(32px, 5vw, 80px); margin-bottom: clamp(26px, 2.6vw, 36px); }
.audiences-section .section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 14px; }
.audiences-section .section-heading h2 { font-size: clamp(50px, 5.6vw, 84px); }
.audiences-section .section-lead { max-width: 480px; margin: 0 0 10px; justify-self: end; }
.audience-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: start; }
.audience-card { min-width: 0; display: flex; flex-direction: column; position: relative; background: #3d305e; border: 1px solid rgba(255,255,255,.1); transition: border-color .4s; }
/* Spotlight : halo qui suit le curseur sur les cartes sombres (--sx/--sy écrits par le JS). */
[data-spotlight] { position: relative; }
[data-spotlight]::after { content: ''; position: absolute; inset: 0; z-index: 1; opacity: 0; pointer-events: none; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.1), transparent 60%); transition: opacity .45s; }
[data-spotlight]:hover::after { opacity: 1; }
.audience-card:hover { border-color: rgba(255,255,255,.22); }
.project-image[data-spotlight]::after { background: radial-gradient(260px circle at var(--sx, 50%) var(--sy, 50%), rgba(255,255,255,.16), transparent 60%); mix-blend-mode: soft-light; }
.audience-image { aspect-ratio: 1; max-height: 270px; overflow: hidden; background: var(--violet); }
.audience-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.65,.2,1); }
.audience-card:nth-child(2) .audience-image img { object-position: center 35%; }
.audience-card:hover .audience-image img { transform: scale(1.055); }
.audience-content { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: clamp(18px, 1.6vw, 24px); }
.card-index { margin-bottom: 8px; color: #e8add2; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.audience-content h3 { min-height: 2.4em; margin: 0 0 10px; font: 800 clamp(18px, 1.4vw, 22px)/1.2 Manrope, sans-serif; letter-spacing: -.045em; }
.audience-content p { margin: 0 0 12px; color: rgba(255,255,255,.72); font-size: 14px; line-height: 1.6; }
.audience-text p:last-child { margin-bottom: 0; }
/* Replié : 4 lignes visibles (line-clamp), le bouton déplie la carte. Sans JS, tout le texte reste lisible. */
html.js .audience-card:not(.is-open) .audience-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
html.js .audience-card:not(.is-open) .audience-text p { display: inline; }
html.js .audience-card:not(.is-open) .audience-text p + p::before { content: ' '; }
.card-more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 2px 0 0; padding: 0; border: 0; background: none; color: #e8add2; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: color .25s; }
.card-more:hover { color: white; }
.card-more-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 1px solid currentColor; border-radius: 50%; font-size: 14px; font-weight: 400; line-height: 1; transition: transform .3s; }
.audience-card.is-open .card-more-icon { transform: rotate(45deg); }
html:not(.js) .card-more { display: none; }
.card-link { display: inline-flex; align-items: center; gap: 25px; margin-top: auto; padding: 14px 0 4px; color: white; border-bottom: 1px solid var(--pink); font-size: 13px; font-weight: 700; transition: gap .25s; }
.card-link:hover { gap: 35px; }

/* Services */
.services-section { background: #ede9f2; }
.services-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(50px, 8vw, 130px); align-items: start; }
.services-intro { position: sticky; top: 145px; }
.services-intro h2 { font-size: clamp(57px, 6vw, 91px); }
.services-intro > p:not(.eyebrow) { max-width: 430px; margin: 32px 0; color: var(--muted); font-size: 18px; line-height: 1.75; }
.service-list { border-top: 1px solid var(--line); }
.service-item { border-bottom: 1px solid var(--line); }
.service-item summary { display: flex; align-items: center; gap: 22px; padding: 25px 0; cursor: pointer; list-style: none; }
.service-item summary::-webkit-details-marker, .project-card summary::-webkit-details-marker { display: none; }
.service-item summary > span:first-child { width: 35px; flex-shrink: 0; color: var(--pink); font-size: 12px; font-weight: 800; }
.service-item h3 { flex: 1; margin: 0; font: 800 clamp(20px, 2vw, 28px)/1.2 Manrope, sans-serif; letter-spacing: -.045em; }
.service-plus { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--line); border-radius: 50%; font-size: 22px; font-weight: 400; transition: transform .3s, color .3s, background .3s; }
.service-item[open] .service-plus { transform: rotate(45deg); color: white; background: var(--violet); }
.service-item > p { margin: -2px 54px 30px 57px; color: var(--muted); font-size: 15px; line-height: 1.8; }

/* Projects */
.projects-section { color: white; background: linear-gradient(150deg, #5052b5 0%, #423782 36%, #312450 80%); }
.projects-heading { margin-bottom: 40px; }
.projects-heading h2 em { color: #f2add4; }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.project-card { min-width: 0; }
.project-image { aspect-ratio: 3 / 2; overflow: hidden; background: #443260; cursor: pointer; }
.project-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.2,.65,.2,1), filter .7s; }
.project-card:hover .project-image img { transform: scale(1.06); filter: saturate(1.13); }
.project-topline { display: flex; justify-content: space-between; gap: 12px; margin: 14px 0 6px; color: #e4b6d4; font-size: 11px; font-weight: 700; letter-spacing: .045em; }
.project-card h3 { margin: 0 0 10px; font: 800 clamp(18px, 1.4vw, 21px)/1.24 Manrope, sans-serif; letter-spacing: -.04em; }
.project-card details { border-top: 1px solid rgba(255,255,255,.35); }
.project-card summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; }
.project-card summary span { font-size: 19px; font-weight: 400; transition: transform .25s; }
.project-card summary:hover span, .project-card:has(.project-image:hover) summary span, .project-card details[open] summary span { transform: translate(3px, -3px); }
.project-card dl { margin: 0 0 15px; }
.project-card dl div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.14); font-size: 12px; line-height: 1.5; }
.project-card dt { color: #e4b6d4; font-weight: 700; }.project-card dd { margin: 0; color: rgba(255,255,255,.8); }

/* Agency */
.agency-section { background: var(--paper); }
/* Deux cartes blanches inclinables (tilt --rx/--ry + spotlight pilotés par le JS), planète flottante en orbite. */
.agency-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 32px); perspective: 1400px; }
.agency-block { position: relative; display: flex; flex-direction: column; padding: clamp(30px, 3vw, 44px) clamp(28px, 3.2vw, 48px) clamp(34px, 3.2vw, 48px); background: white; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 24px 60px rgba(38,28,62,.07); overflow: hidden; transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transform-style: preserve-3d; transition: transform .7s cubic-bezier(.2,.65,.2,1), box-shadow .45s, border-color .45s; }
.agency-block:hover { border-color: rgba(94,66,166,.4); box-shadow: 0 36px 80px rgba(38,28,62,.14); transition: transform .25s ease-out, box-shadow .45s, border-color .45s; }
.agency-block[data-spotlight]::after { z-index: 0; background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), rgba(94,66,166,.09), transparent 60%); }
/* Orbite décorative : anneau fin qui déborde en haut à droite, sur lequel flotte la planète. */
.agency-block::before { content: ''; position: absolute; right: -150px; top: -150px; width: 330px; height: 330px; border: 1px solid var(--line); border-radius: 50%; pointer-events: none; transition: transform 1.2s cubic-bezier(.2,.65,.2,1), border-color .45s; }
.agency-block:hover::before { transform: scale(1.08); border-color: rgba(94,66,166,.32); }
.agency-label { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin-bottom: 20px; color: var(--violet); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.agency-label::before { content: ''; width: 28px; height: 1px; background: var(--violet); transition: width .4s cubic-bezier(.2,.65,.2,1); }
.agency-block:hover .agency-label::before { width: 44px; }
.agency-planet { --planet-size: 76px; position: absolute; z-index: 2; right: clamp(22px, 2.6vw, 38px); top: clamp(22px, 2.6vw, 38px); opacity: 1; transform: none; filter: saturate(.95); animation: agency-float 7s ease-in-out infinite alternate; transition: filter .5s, box-shadow .5s; }
.agency-planet.planet-1 { box-shadow: inset -12px -10px 22px rgba(20,10,45,.55), 0 0 28px var(--glow); }
.agency-planet.planet-1::before, .agency-planet.planet-1::after { border-width: 2px; transition: transform .9s cubic-bezier(.2,.65,.2,1); }
.agency-planet.planet-3 { box-shadow: inset -12px -10px 22px rgba(14,16,60,.6), 0 0 28px var(--glow); }
.agency-planet.planet-3::after { box-shadow: 0 0 6px rgba(255,255,255,.35); animation-duration: 16s; }
.agency-block:hover .agency-planet { filter: saturate(1.1); box-shadow: inset -12px -10px 22px rgba(20,10,45,.55), 0 0 48px var(--glow), 0 18px 40px rgba(38,28,62,.18); }
.agency-block:hover .agency-planet.planet-3 { box-shadow: inset -12px -10px 22px rgba(14,16,60,.6), 0 0 48px var(--glow), 0 18px 40px rgba(38,28,62,.18); }
.agency-block:hover .agency-planet.planet-1::before, .agency-block:hover .agency-planet.planet-1::after { transform: rotate(-34deg); }
.agency-block:hover .agency-planet.planet-3::after { animation-duration: 6s; }
@keyframes agency-float { to { translate: 0 -10px; } }
.agency-text { position: relative; z-index: 1; padding-right: clamp(60px, 7vw, 100px); }
.agency-text h3 { position: relative; margin: 0 0 22px; padding-bottom: 14px; font: 800 clamp(22px, 2.1vw, 30px)/1.2 Manrope, sans-serif; letter-spacing: -.04em; }
.agency-text h3::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--violet), var(--pink)); transform-origin: left; transform: scaleX(0); transition: transform .8s cubic-bezier(.2,.65,.2,1) .35s, width .5s cubic-bezier(.2,.65,.2,1); }
.agency-block.is-visible .agency-text h3::after, html:not(.has-motion) .agency-text h3::after { transform: scaleX(1); }
.agency-block:hover .agency-text h3::after { width: 110px; }
.agency-text p, .agency-text li { color: var(--muted); font-size: 15px; line-height: 1.7; }
.agency-text p { margin: 0 0 14px; }.agency-text p:last-child, .agency-text ul:last-child { margin-bottom: 0; }
.agency-text ul { margin: 0 0 14px; padding: 0; list-style: none; }
.agency-text li { position: relative; margin: 6px 0; padding-left: 22px; transition: color .3s, translate .3s; }
.agency-text li::before { content: ''; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #c9b4ec, var(--violet) 55%, var(--pink)); box-shadow: 0 0 0 0 rgba(183,78,145,.3); transition: transform .3s, box-shadow .3s; }
.agency-text li:hover { color: var(--ink); translate: 4px 0; }
.agency-text li:hover::before { transform: scale(1.25); box-shadow: 0 0 0 4px rgba(183,78,145,.15); }
/* Cascade à l'apparition : titre, paragraphes et puces entrent les uns après les autres. */
html.has-motion .agency-grid .agency-block:nth-child(2) { transition-delay: .15s; }
html.has-motion .agency-block .agency-text > *, html.has-motion .agency-block .agency-text li { opacity: 0; translate: 0 14px; transition: opacity .55s cubic-bezier(.2,.65,.2,1), translate .55s cubic-bezier(.2,.65,.2,1); }
html.has-motion .agency-block.is-visible .agency-text > *, html.has-motion .agency-block.is-visible .agency-text li { opacity: 1; translate: 0 0; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(1) { transition-delay: .2s; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(2) { transition-delay: .28s; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(3) { transition-delay: .36s; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(4) { transition-delay: .44s; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(5) { transition-delay: .52s; }
html.has-motion .agency-block.is-visible .agency-text > :nth-child(n + 6) { transition-delay: .6s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(1) { transition-delay: .5s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(2) { transition-delay: .57s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(3) { transition-delay: .64s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(4) { transition-delay: .71s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(5) { transition-delay: .78s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(6) { transition-delay: .85s; }
html.has-motion .agency-block.is-visible .agency-text li:nth-child(n + 7) { transition-delay: .92s; }
/* Le reveal générique écrase transform : on rétablit le tilt une fois la carte visible. */
html.has-motion .agency-block.reveal.is-visible { transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.2,1), box-shadow .45s, border-color .45s; }
html.has-motion .agency-block.reveal.is-visible:hover { transition: opacity .75s ease, transform .25s ease-out, box-shadow .45s, border-color .45s; }

/* Contact and footer */
.contact-section { overflow: hidden; color: white; background: var(--night); }
.contact-glow { position: absolute; width: 700px; height: 700px; right: -200px; top: -250px; border-radius: 50%; background: radial-gradient(circle, rgba(183,78,145,.26), transparent 70%); pointer-events: none; }
.contact-layout { position: relative; display: grid; grid-template-columns: 1.5fr .5fr; gap: clamp(50px, 8vw, 150px); }
.contact-main .eyebrow { color: #ecc3de; }
.contact-main h2 { margin-bottom: 38px; }
.contact-main > p:not(.eyebrow) { max-width: 760px; margin: 0 0 15px; color: rgba(255,255,255,.71); font-size: 17px; line-height: 1.75; }
.contact-email { display: inline-flex; align-items: center; gap: 20px; margin-top: 52px; padding-bottom: 11px; border-bottom: 2px solid var(--pink); font: 700 clamp(22px, 2.8vw, 37px)/1.2 Manrope, sans-serif; letter-spacing: -.05em; overflow-wrap: anywhere; transition: color .25s; }
.contact-email:hover { color: #e7a0c9; }
.contact-details { padding-top: 28px; }.contact-details > div { padding: 0 0 28px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,.2); }
.contact-label { display: block; margin-bottom: 12px; color: #e7a0c9; font-size: 11px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.contact-details address { font-style: normal; }.contact-details > div > a { display: inline-block; padding: 8px 0; }.contact-details a:hover { color: #e7a0c9; }.social-links { display: flex; flex-direction: row; align-items: center; gap: 14px; }
.social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: white; transition: color .25s, border-color .25s, transform .25s; }
.social-links a:hover { color: #e7a0c9; border-color: #e7a0c9; transform: translateY(-2px); }
.social-links svg { width: 18px; height: 18px; fill: currentColor; }
.site-footer { padding: 32px 0; color: rgba(255,255,255,.74); background: #1b1529; font-size: 12px; }
.footer-inner { display: flex; align-items: center; gap: 45px; }.footer-inner p { margin: 0 0 0 auto; }.footer-inner > a:not(.footer-brand) { display: inline-block; padding: 12px 0; }.site-footer a:hover { color: white; }
.footer-brand { display: inline-flex; align-items: center; gap: 10px; color: white; font: 800 13px Manrope, sans-serif; letter-spacing: .09em; }.footer-mark { width: 28px; height: 28px; object-fit: contain; }

/* Legal page */
.legal-main { min-height: 80vh; padding: 160px 0 110px; background: var(--paper); }.legal-main .container { max-width: 900px; }
.legal-main h1 { margin: 0 0 65px; font: 800 clamp(49px, 7vw, 88px)/1.07 Manrope, sans-serif; letter-spacing: -.07em; }
.legal-main h1 em { color: var(--pink); }.legal-block { padding: 34px 0; border-top: 1px solid var(--line); }.legal-block h2 { margin: 0 0 22px; color: var(--violet); font: 800 18px/1.4 Manrope, sans-serif; text-transform: uppercase; letter-spacing: .02em; }.legal-block p { margin: 0 0 13px; color: var(--muted); }.legal-block a { color: var(--violet); text-decoration: underline; text-underline-offset: 3px; }

/* 404 : les orbites du hero encadrent le code erreur au lieu des photos. */
.hero.error-hero { min-height: max(700px, calc(100svh - 92px)); padding-bottom: 80px; }
.error-hero .hero-inner { min-height: 500px; }
.error-hero .hero-copy { padding-bottom: 0; }
.error-visual { height: min(560px, 44vw); min-height: 440px; transform: none; }
.error-system { position: absolute; width: min(100%, 560px); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.error-system::before { content: ''; position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(183,78,145,.24), rgba(94,66,166,.1) 45%, transparent 72%); }
.error-system .hero-orbit-one, .error-system .hero-planet-a, .error-system .hero-planet-b { width: 100%; left: 0; top: 0; }
.error-system .hero-orbit-two, .error-system .hero-planet-c { width: 70%; left: 15%; top: 15%; }
.error-number { --depth: .6; position: absolute; inset: 0; display: grid; place-items: center; z-index: 1; color: #f4e9fa; font: 800 clamp(130px, 16vw, 230px)/1 Manrope, sans-serif; letter-spacing: -.11em; padding-right: .11em; text-shadow: 0 0 70px rgba(231,160,201,.28); pointer-events: none; }

/* Motion only when JS is ready, never a prerequisite for reading content. */
html.has-motion .reveal { opacity: 0; transform: translateY(30px); transition: opacity .75s ease, transform .75s cubic-bezier(.2,.65,.2,1); }
html.has-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes breathe { to { transform: scale(1.07) rotate(4deg); } }

@media (max-width: 1200px) {
  .site-header { padding-inline: 30px; }.site-nav { gap: 15px; font-size: 11px; }
  .container { width: min(calc(100% - 80px), var(--page-width)); }
  .hero h1 { font-size: clamp(61px, 6.3vw, 90px); }
}

@media (max-width: 1100px) {
  .audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.audience-image { aspect-ratio: 16 / 10; max-height: 300px; }.audience-content h3 { min-height: 0; font-size: 23px; }
}

@media (max-width: 980px) {
  .site-header { height: 76px; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: transparent; color: white; cursor: pointer; position: relative; z-index: 102; }
  .menu-toggle span { width: 19px; height: 1px; background: currentColor; transition: transform .25s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-nav { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 0; position: fixed; inset: 0; height: 100dvh; padding: 100px max(40px, 8vw) 50px; overflow-y: auto; background: var(--night); opacity: 0; visibility: hidden; transform: translateY(-14px); transition: opacity .3s, visibility .3s, transform .3s; }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }.site-nav > a:not(.nav-contact) { font: 800 clamp(25px, 5vw, 45px)/1.25 Manrope, sans-serif; letter-spacing: -.05em; padding: 9px 0; }.site-nav .nav-contact { margin-top: 28px; align-self: flex-start; font-size: 16px; }
  html:not(.js) .site-header { position: relative; height: auto; flex-wrap: wrap; }
  html:not(.js) .menu-toggle { display: none; }
  html:not(.js) .site-nav { position: static; height: auto; width: 100%; padding: 16px 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px 20px; overflow: visible; opacity: 1; visibility: visible; transform: none; background: none; }
  html:not(.js) .site-nav > a:not(.nav-contact) { font: 700 13px/1.5 'DM Sans', sans-serif; padding: 5px 0; }
  html:not(.js) .site-nav .nav-contact { margin-top: 0; }
  .hero { min-height: 760px; }.hero-inner { grid-template-columns: 55% 45%; }.hero-visual { min-height: 430px; }.hero h1 { font-size: clamp(57px, 7vw, 75px); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-layout { gap: 40px; }.services-intro h2 { font-size: 65px; }
  .values-explorer { grid-template-columns: 1fr; gap: 34px; align-items: start; }
  .planet-nav { flex-direction: row; justify-content: center; gap: 10px; padding-left: 0; }.planet-nav::before { display: none; }
  .planet-tab { --planet-size: 72px; flex: 1 1 0; flex-direction: column; gap: 12px; padding: 6px; text-align: center; }.planet-label { align-items: center; font-size: 15px; }
}

@media (max-width: 700px) {
  html { scroll-padding-top: 76px; }
  .container { width: calc(100% - 42px); }
  .site-header { padding-inline: 21px; }.brand { font-size: 12px; }.brand-mark { width: 34px; height: 34px; }
  .section { padding: 90px 0; }.section-heading { margin-bottom: 42px; }.section-heading h2, .contact-main h2 { font-size: clamp(54px, 12vw, 76px); }
  .hero { min-height: 0; padding: 125px 0 70px; }.hero-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }.hero-copy { padding: 0; }.hero h1 { font-size: clamp(52px, 11.6vw, 77px); max-width: 620px; }.hero-intro { margin: 27px 0; }.hero-actions { gap: 20px; }.hero-visual { height: min(110vw, 540px); min-height: 320px; width: 100%; margin-top: 16px; transform: none; }.hero-photo-back { right: 6%; width: 49%; }.hero-photo-front { left: 5%; width: 57%; }.hero-logo { right: 1%; width: 43%; bottom: -5%; }.hero-orbit-one, .hero-planet-a, .hero-planet-b { top: -10%; }.hero-planet-a { --planet-size: 36px; }.hero-planet-b { --planet-size: 24px; }.hero-planet-c { --planet-size: 28px; }.hero-index { display: none; }.scroll-cue { position: static; display: inline-flex; margin: 20px 0 0 21px; }
  .values-section { padding-block: 80px; }.values-explorer { gap: 26px; padding-top: 30px; }
  .planet-tab { --planet-size: 58px; gap: 10px; padding: 4px 2px; }.planet-label { font-size: 12.5px; letter-spacing: -.01em; }.planet-index { font-size: 10px; }
  .value-panel { padding: 26px 22px 30px; }.value-panel h3 { font-size: 25px; }.value-panel p { font-size: 15px; }
  .audiences-section { padding-block: 80px; }.audiences-section .section-heading { grid-template-columns: 1fr; margin-bottom: 36px; }.audiences-section .section-lead { max-width: 570px; margin: 22px 0 0; justify-self: start; }
  .audience-grid { grid-template-columns: 1fr; gap: 20px; }.audience-image { aspect-ratio: 16 / 10; }.audience-content { padding: 24px; }
  .services-layout { display: block; }.services-intro { position: static; margin-bottom: 53px; }.services-intro h2 { font-size: clamp(54px, 12vw, 76px); }.services-intro > p:not(.eyebrow) { font-size: 16px; }.service-item summary { gap: 12px; }.service-item h3 { font-size: 21px; }.service-item > p { margin: 0 4px 28px 47px; }
  .project-grid { grid-template-columns: 1fr; gap: 36px; }.project-image { aspect-ratio: 4 / 3; }.project-card h3 { font-size: 22px; }
  .agency-grid { grid-template-columns: 1fr; gap: 18px; }.agency-block { padding: 28px 22px 32px; }.agency-block::before { right: -110px; top: -110px; width: 240px; height: 240px; }.agency-planet { --planet-size: 54px; right: 18px; top: 18px; }.agency-text { padding-right: 0; }.agency-text h3 { font-size: 24px; padding-right: 64px; }
  .contact-layout { grid-template-columns: 1fr; gap: 50px; }.contact-main > p:not(.eyebrow) { font-size: 15px; }.contact-email { font-size: clamp(21px, 5vw, 32px); margin-top: 30px; }.contact-details { padding: 0; }.footer-inner { flex-wrap: wrap; gap: 16px 26px; }.footer-inner p { margin-left: 0; }.footer-brand { width: 100%; }
  .legal-main { padding: 125px 0 70px; }.legal-main h1 { margin-bottom: 42px; }
  .hero.error-hero { min-height: 0; padding-bottom: 48px; }
  .error-hero .hero-inner { min-height: 0; }
  .error-visual { height: min(94vw, 470px); min-height: 0; margin-top: 28px; }
  .error-system { width: min(100%, 440px); }
  .error-number { font-size: clamp(110px, 30vw, 180px); }
}

@media (max-width: 390px) {
  .hero h1 { font-size: 48px; }.hero-actions { align-items: flex-start; flex-direction: column; }.hero-visual { min-height: 290px; }.service-item h3 { font-size: 18px; }.service-plus { width: 33px; height: 33px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  html.has-motion .reveal { opacity: 1; transform: none; }
  .hero [data-depth], .hero-copy, .hero-orbit-one, .hero-orbit-two, .hero-planet, [data-magnetic] { translate: none; }
  .hero-planet-a .hero-planet-arm { rotate: 20deg; }.hero-planet-b .hero-planet-arm { rotate: 215deg; }.hero-planet-c .hero-planet-arm { rotate: 240deg; }
  .hero-cursor-glow, [data-spotlight]::after { display: none; }
  .value-panel, .agency-block, html.has-motion .agency-block.reveal.is-visible { transform: none; }
  .planet-3::after, .agency-planet { animation: none; }
  html.has-motion .agency-block .agency-text > *, html.has-motion .agency-block .agency-text li { opacity: 1; translate: none; }
  .agency-text h3::after { transform: scaleX(1); }
  html.has-motion .value-panel.is-entering, html.has-motion .value-panel.is-entering > * { animation: none; }
}