/* ==========================================================================
   valentind.ch — version 4
   Base : les codes de la carte de visite (blanc, noir, grand V rouge).
   Chaque étape du parcours reprend les codes de sa propre marque.
   Polices hébergées localement (SIL Open Font License).
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("../fonts/playfair-display-latin.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Josefin Sans"; src: url("../fonts/josefin-sans-latin.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }

:root {
  --ink: #111113;
  --text: #45454a;
  --muted: #696970;   /* gris des textes secondaires, assez foncé pour rester lisible sur blanc */
  --line: #e4e4e1;
  --soft: #f4f4f2;
  --white: #fff;
  --red: #e8000d;
  --red-dark: #c2000b;

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --wrap: 1160px;
  --gutter: clamp(20px, 5vw, 64px);
  --s-section: clamp(84px, 10.5vw, 152px);
  --radius: clamp(18px, 2.2vw, 30px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
picture { display: contents; }   /* l'image garde sa mise en page, <picture> ne sert qu'à proposer le WebP */
img { height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, address { margin: 0; }
a { color: inherit; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--red); color: var(--white); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: fixed; left: 14px; top: -80px; z-index: 100;
  padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--white);
  font-weight: 600; text-decoration: none; transition: top .2s;
}
.skip:focus { top: 14px; }

.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

.section { padding-block: var(--s-section); }
.section--soft { background: var(--soft); }

.label { margin-bottom: 14px; font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.section__lead { margin-top: clamp(16px, 2vw, 24px); max-width: 34em; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--ink); }
.h2 { font-size: clamp(2rem, 4.6vw, 3.6rem); line-height: 1.04; letter-spacing: -.04em; font-weight: 800; color: var(--ink); text-wrap: balance; }

/* --------------------------------------------------------------------------
   Boutons et liens
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 28px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-weight: 600; font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, transform .3s var(--ease);
}
.btn:hover { background: var(--red); transform: translateY(-2px); }
.btn:active { transform: none; }
.link { font-weight: 600; font-size: 1rem; color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.link:hover { color: var(--red); }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background-color .3s, box-shadow .3s; }
.header.is-stuck { background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line); }
.header__in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }

.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand__mark { width: 36px; height: 36px; fill: var(--red); flex: none; }
.brand__word { width: 152px; height: auto; aspect-ratio: 277.55 / 22.36; fill: currentColor; }

.nav {
  display: flex; align-items: center; gap: clamp(12px, 2vw, 26px);
  padding: 5px 5px 5px clamp(14px, 2vw, 22px); border-radius: 999px; background: var(--white);
  box-shadow: 0 0 0 1px rgba(17, 17, 19, .07), 0 10px 26px -16px rgba(0, 0, 0, .35);
}
.header.is-stuck .nav { box-shadow: 0 0 0 1px rgba(17, 17, 19, .07); }
.nav a { font-size: .9375rem; font-weight: 500; line-height: 1.2; color: var(--ink); text-decoration: none; white-space: nowrap; transition: color .2s; }
.nav a:not(.nav__cta):hover { color: var(--red); }
.nav__cta { padding: 9px 18px; border-radius: 999px; background: var(--ink); color: var(--white) !important; font-weight: 600 !important; transition: background-color .25s !important; }
.nav__cta:hover { background: var(--red); }

@media (max-width: 640px) {
  .header__in { height: 64px; }
  .brand__word { display: none; }
  .nav a { font-size: .875rem; }
}

/* --------------------------------------------------------------------------
   Accueil : la carte de visite
   -------------------------------------------------------------------------- */
.hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; padding: 118px 0 60px; }
.hero__art { position: absolute; inset: 0; pointer-events: none; }
.hero__v { position: absolute; left: 53vw; top: 50%; width: 80vw; min-width: 760px; height: auto; aspect-ratio: 1; overflow: visible; transform: translateY(calc(-58% + var(--shift, 0px))); fill: url(#hero-red); will-change: transform; }

/* Le V est fait de trois éclats. Chacun a sa direction (--dx, --dy), son angle
   et sa profondeur : ils s'assemblent à l'arrivée, respirent, suivent le
   curseur avec un léger relief et s'écartent quand on quitte l'accueil.
   Les variables --mx, --my (curseur) et --sp (défilement) viennent de main.js.
   Dans un SVG, 1px vaut une unité du dessin (500 unités de large). */
.hero__shard, .hero__move, .hero__shard path { transform-box: fill-box; transform-origin: center; }
.hero__shard--a { --dx: -1; --dy: .28; --rot: -7deg; --depth: 1; --d: .05s; --float: 9s; }
.hero__shard--b { --dx: -.12; --dy: -1; --rot: 5deg; --depth: 1.7; --d: .2s; --float: 11s; }
.hero__shard--c { --dx: 1; --dy: .32; --rot: 8deg; --depth: 2.4; --d: .35s; --float: 13s; }
.hero__shard { animation: shard-in 1.6s var(--ease) both; animation-delay: var(--d); }
.hero__move {
  transform:
    translate(calc(var(--mx, 0) * var(--depth) * -7px + var(--dx) * var(--sp, 0) * 30px),
              calc(var(--my, 0) * var(--depth) * -7px + var(--dy) * var(--sp, 0) * 30px))
    rotate(calc(var(--rot) * var(--sp, 0) * .7));
}
.hero__shard path { animation: shard-float var(--float) ease-in-out infinite alternate; }
@keyframes shard-in { from { opacity: 0; transform: translate(calc(var(--dx) * 80px), calc(var(--dy) * 80px)) rotate(var(--rot)); } }
@keyframes shard-float { from { transform: translate(0, 0); } to { transform: translate(calc(var(--dx) * 5px), calc(var(--dy) * 5px)); } }
.hero__in { position: relative; z-index: 1; }

.hero__title { max-width: 11.5em; font-size: clamp(2rem, 4.1vw, 3.7rem); line-height: 1.02; letter-spacing: -.035em; text-transform: uppercase; color: var(--ink); }
.hero__title b { display: block; font-weight: 800; }
.hero__title span { display: block; font-weight: 300; }
.hero__lead { margin-top: clamp(20px, 3vh, 30px); max-width: 26.5em; font-size: clamp(1.0625rem, 1.45vw, 1.25rem); line-height: 1.5; color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: clamp(26px, 4vh, 40px); }
.hero__card { margin-top: clamp(40px, 8vh, 84px); font-style: normal; font-size: .9375rem; line-height: 1.65; color: var(--muted); }
.hero__card b { display: block; font-weight: 700; color: var(--ink); }
.hero__card a { text-decoration: none; }
.hero__card a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
.rise { animation: rise .9s var(--ease) both; animation-delay: var(--d, 0s); }

@media (min-width: 901px) {
  .hero__in > * { max-width: min(40vw, 560px); }
  .hero__in > .hero__title { max-width: min(43vw, 612px); }
}
@media (max-width: 900px) {
  .hero { display: block; min-height: 0; padding: 0 0 56px; }
  .hero__art { position: relative; inset: auto; height: 62vw; max-height: 420px; overflow: hidden; }
  .hero__v { left: 34vw; top: 0; width: 118vw; min-width: 0; transform: translateY(calc(-22% + var(--shift, 0px))); }
  .hero__in { margin-top: 18px; }
  .hero__title { font-size: clamp(2rem, 8.6vw, 3.4rem); }
}

/* --------------------------------------------------------------------------
   Aujourd'hui
   -------------------------------------------------------------------------- */
.now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 4vw, 56px); margin-top: clamp(36px, 5vw, 64px); }
.now__item { padding-top: 22px; border-top: 2px solid var(--ink); }
.now__item h3 { margin-bottom: 12px; font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 700; color: var(--ink); }
.examples { display: grid; gap: 8px; margin-top: 18px; font-size: .9375rem; }
.examples li { position: relative; padding-left: 18px; }
.examples li::before { content: ""; position: absolute; left: 0; top: .68em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }

@media (max-width: 860px) {
  .now { grid-template-columns: 1fr; gap: 32px; }
}

/* --------------------------------------------------------------------------
   Qui suis-je
   -------------------------------------------------------------------------- */
.about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 40px 24px; align-items: center; }
.about__portrait { grid-column: 1 / span 4; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: #e6e6e3; }
.about__portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; }
.about__body { grid-column: 6 / -1; }
.about__lead { margin-top: clamp(18px, 2.4vw, 28px); max-width: 23em; font-size: clamp(1.25rem, 2vw, 1.625rem); line-height: 1.4; color: var(--ink); }
.about__text { margin-top: clamp(14px, 1.8vw, 20px); max-width: 31em; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; }

@media (max-width: 900px) {
  .about__portrait { grid-column: 1 / -1; max-width: 420px; }
  .about__body { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Parcours : une section pleine largeur par casquette, dans les codes de sa
   marque. Même ossature partout : logo et période, texte et visuel, vidéos
   ou images, trois repères.
   -------------------------------------------------------------------------- */
.section--ink { background: var(--ink); color: #b9b9bf; }
.section--ink .h2, .section--ink .section__lead { color: var(--white); }
.section--ink .label { color: #ff4a55; }
.section--ink :focus-visible { outline-color: var(--white); }

.parcours__text { margin-top: clamp(14px, 1.8vw, 20px); max-width: 36em; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; }
.parcours__index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(16px, 2.4vw, 32px); margin-top: clamp(44px, 6vw, 80px); border-top: 1px solid rgba(255, 255, 255, .22); }
.parcours__index a { display: block; height: 100%; padding: 18px 0 4px; font-size: 1.0625rem; font-weight: 600; line-height: 1.3; color: var(--white); text-decoration: none; transition: color .2s; }
.parcours__index span { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8e8e96; }
.parcours__index a:hover { color: #ff4a55; }

@media (max-width: 900px) {
  .parcours__index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .parcours__index li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .parcours__index a { padding: 14px 0; }
}
@media (max-width: 480px) {
  .parcours__index { grid-template-columns: 1fr; }
}

.cas {
  --cas-bg: var(--white); --cas-text: var(--text); --cas-title: var(--ink);
  --cas-accent: var(--red); --cas-line: var(--line); --cas-tile: rgba(0, 0, 0, .05);
  padding-block: clamp(72px, 9.5vw, 136px);
  background: var(--cas-bg); color: var(--cas-text);
}
.cas__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: clamp(18px, 2.4vw, 28px); border-bottom: 1px solid var(--cas-line); }
.cas__logo { width: auto; height: clamp(50px, 6vw, 76px); }
.cas__brand { display: flex; align-items: center; gap: 14px; font-size: clamp(1.1875rem, 1.9vw, 1.5rem); font-weight: 700; line-height: 1.2; color: var(--cas-title); }
.cas__brand img { width: auto; height: clamp(56px, 6.4vw, 80px); }
.cas__period { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--cas-accent); }

.cas__main { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 36px 24px; align-items: center; margin-top: clamp(36px, 5vw, 72px); }
.cas__intro { grid-column: 1 / span 5; }
.cas__visual { grid-column: 7 / -1; }
.cas__visual--plain img { width: 100%; height: auto; }
.cas__title { font-size: clamp(2.2rem, 4.7vw, 4rem); line-height: 1.03; color: var(--cas-title); text-wrap: balance; }
.cas__text { margin-top: clamp(16px, 2vw, 22px); max-width: 27em; font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; }
.cas__link { margin-top: clamp(18px, 2.4vw, 26px); }
.cas__link a { font-weight: 600; color: var(--cas-title); text-decoration-color: var(--cas-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.cas__link a:hover { color: var(--cas-accent); }

.cas__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px) clamp(12px, 1.6vw, 22px); margin-top: clamp(32px, 4.4vw, 60px); }
.cas__tiles--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cas__tilecap { margin-top: 10px; font-size: .875rem; line-height: 1.4; }

.cas__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px clamp(24px, 4vw, 56px); margin: clamp(32px, 4.4vw, 60px) 0 0; padding-top: clamp(22px, 2.8vw, 32px); border-top: 1px solid var(--cas-line); }
.cas__facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cas-accent); }
.cas__facts dd { margin: 8px 0 0; font-size: .9375rem; }

/* Images et vidéos */
.media { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: clamp(12px, 1.5vw, 20px); overflow: hidden; background: var(--cas-tile); color: inherit; text-decoration: none; }
.cas__visual .media { aspect-ratio: 3 / 2; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.media--contain img { object-fit: contain; padding: clamp(6px, 1vw, 14px); }
.media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.media__play {
  position: absolute; left: 50%; top: 50%; width: clamp(52px, 5vw, 68px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
  transition: transform .35s var(--ease), background-color .25s;
}
.media__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent var(--ink); }
.video:hover img { transform: scale(1.04); }
.video:hover .media__play { transform: translate(-50%, -50%) scale(1.08); }
.media.is-playing { background: #000; }

/* Compteau : bleu clair, bleu roi, Space Grotesk */
.cas--compteau { --cas-bg: linear-gradient(165deg, #eef5ff, #dbe9ff); --cas-text: #3f5d80; --cas-title: #0f2946; --cas-accent: #1f6edc; --cas-line: rgba(15, 41, 70, .14); --cas-tile: rgba(255, 255, 255, .6); }
.cas--compteau .cas__logo { margin-left: -6px; }
.cas--compteau .cas__title { font-family: "Space Grotesk", var(--font); font-weight: 600; letter-spacing: -.035em; }
.cas--compteau .media--contain { aspect-ratio: 16 / 10; }

/* Commune de Montanaire : vert et jaune des armoiries */
.cas--montanaire { --cas-bg: #028d3f; --cas-text: #e3f3e9; --cas-title: var(--white); --cas-accent: #fbdb01; --cas-line: rgba(255, 255, 255, .28); --cas-tile: #027a37; }
.cas--montanaire .cas__title { font-weight: 700; letter-spacing: -.035em; }

/* ledrone.ch : blanc, rouge foncé, Josefin Sans */
.cas--ledrone { --cas-bg: var(--white); --cas-text: #606060; --cas-title: #ac1416; --cas-accent: #ac1416; --cas-line: #e4e4e1; }
.cas--ledrone .cas__logo { height: clamp(58px, 7vw, 90px); }
.cas--ledrone .cas__title { font-family: "Josefin Sans", var(--font); font-weight: 300; letter-spacing: .04em; text-transform: uppercase; }

/* Valentin Dubach Productions : noir, blanc, V rouge */
.cas--vdp { --cas-bg: #0c0c0d; --cas-text: #b9b9bf; --cas-title: var(--white); --cas-accent: #ff4a55; --cas-line: rgba(255, 255, 255, .18); --cas-tile: #1b1b1d; }
.cas--vdp .cas__logo { height: clamp(38px, 5vw, 62px); }
.cas--vdp .cas__title { font-weight: 800; letter-spacing: -.025em; text-transform: uppercase; }

/* Jour-J Films : ivoire, Playfair Display */
.cas--jourj { --cas-bg: #efe9df; --cas-text: #4a443a; --cas-title: #17150f; --cas-accent: #7a6a4f; --cas-line: #d8cebd; }
.cas--jourj .cas__logo { height: clamp(70px, 8.2vw, 106px); margin: -14px 0 -14px -12px; filter: brightness(0); opacity: .9; }
.cas--jourj .cas__period { letter-spacing: .2em; }
.cas--jourj .cas__title { font-family: "Playfair Display", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }

@media (max-width: 900px) {
  .cas__intro, .cas__visual { grid-column: 1 / -1; }
  .cas__facts { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 700px) {
  .cas__tiles, .cas__tiles--2 { grid-template-columns: 1fr; }
}


/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 48px 24px; align-items: start; }
.contact__intro { grid-column: 1 / span 5; }
.contact__text { margin-top: clamp(16px, 2vw, 24px); max-width: 24em; font-size: clamp(1.125rem, 1.6vw, 1.375rem); line-height: 1.5; color: var(--ink); }
.contact__direct { display: grid; gap: 0; margin-top: clamp(28px, 3.6vw, 44px); border-top: 1px solid var(--line); }
.contact__direct li { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact__direct span { font-size: .8125rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact__direct a { font-size: 1.125rem; font-weight: 600; color: var(--ink); text-decoration: none; overflow-wrap: anywhere; text-align: right; }
.contact__direct a:hover { color: var(--red); }

.form { grid-column: 7 / -1; display: grid; gap: 18px; padding: clamp(22px, 3vw, 40px); border-radius: var(--radius); background: var(--soft); }
.form__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.form__field { display: grid; gap: 7px; }
.form label { font-size: .875rem; font-weight: 600; color: var(--ink); }
.form label span { font-weight: 400; color: var(--muted); }
.form input, .form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid #d5d5d1; border-radius: 12px; background: var(--white);
  font: inherit; font-size: 1rem; line-height: 1.4; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; min-height: 140px; }
.form input:focus, .form textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(17, 17, 19, .1); }
.form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 4px; }
.form__send .btn { border: 0; cursor: pointer; font-family: inherit; }
.form__send .btn[disabled] { opacity: .6; cursor: default; transform: none; }
.form__note { font-size: .875rem; color: var(--muted); }
.form__status { min-height: 1.5em; font-size: .9375rem; font-weight: 500; color: var(--ink); }
.form__status a { color: var(--ink); text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (max-width: 900px) {
  .contact__intro, .form { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .form__pair { grid-template-columns: 1fr; }
}

.footer { padding: 26px 0 32px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }

/* --------------------------------------------------------------------------
   Apparitions
   -------------------------------------------------------------------------- */
.js:not(.no-reveal) [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: var(--delay, 0s);
}
.js:not(.no-reveal) [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .hero__shard, .hero__shard path { animation: none; }
  .js:not(.no-reveal) [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media print {
  .header, .hero__cta { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}