/* =============================================================================
   style.css — feuille de styles principale
   -----------------------------------------------------------------------------
   Charge :
     1. fonts.css   (auto-hébergement Source Sans 3 + Montserrat)
     2. tokens.css  (toutes les valeurs visuelles)
   N'utilise aucune valeur littérale hors compositions (rgba overlays).
   ============================================================================= */

/* ----------------------------------------------------------------------------
   Reset léger
   ---------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-heading);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

/* ----------------------------------------------------------------------------
   Helpers
   ---------------------------------------------------------------------------- */
.container { max-width: var(--site-width); margin: 0 auto; padding: 0 var(--container-padding-x); }
.narrow    { max-width: var(--site-width-narrow); margin-inline: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip-link a11y */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--color-primary-deep);
  color: var(--color-on-primary);
  padding: 12px 16px;
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Focus visible global */
:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }

/* Kicker (étiquette teal avec filet) */
.kicker {
  font-family: var(--font-nav);
  font-size: 11px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.kicker::before { content: ""; width: 32px; height: 1px; background: var(--color-primary); }
.section-number {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--color-primary);
  text-transform: uppercase;
  font-feature-settings: "tnum";
}

/* Filet décoratif (point centré) */
.rule {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3);
  margin: var(--space-7) 0;
}
.rule::before, .rule::after {
  content: ""; flex: 0 0 80px; height: 1px; background: var(--color-border);
}
.rule .dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }

/* Titres */
.h1 { font-family: var(--font-heading); font-size: var(--fs-h1); font-weight: var(--fw-h1); line-height: var(--lh-h1); letter-spacing: -0.5px; color: var(--color-heading); margin: 0; }
.h2 { font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: var(--fw-h2); line-height: var(--lh-h2); letter-spacing: -0.5px; color: var(--color-heading); margin: 0 0 var(--space-5); }
.h3 { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: var(--fw-h3); letter-spacing: var(--ls-h3); text-transform: uppercase; color: var(--color-heading); margin: 0; }

/* Lead */
.lead {
  font-size: 20px; line-height: 1.6; color: var(--color-heading);
  font-weight: var(--fw-body); margin: 0 0 var(--space-5); max-width: 60ch;
}

/* ----------------------------------------------------------------------------
   Boutons
   ---------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--button-bg);
  color: var(--button-color);
  font-family: var(--font-button);
  font-size: var(--fs-button);
  font-weight: var(--fw-button);
  letter-spacing: var(--ls-button);
  text-transform: var(--button-text-transform);
  padding: var(--button-padding-y) var(--button-padding-x);
  border: var(--button-border);
  border-radius: var(--button-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
  min-height: 44px;
}
.btn:hover, .btn:focus-visible { background: var(--button-bg-hover); outline: none; }

.btn-quiet {
  background: transparent;
  border: 1px solid rgba(255,255,255,.5);
  color: var(--color-on-primary);
}
.btn-quiet:hover, .btn-quiet:focus-visible { background: rgba(255,255,255,.08); border-color: var(--color-on-primary); }

.btn-secondary {
  background: transparent;
  color: var(--color-heading);
  border: 2px solid var(--color-border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-deep);
  background: transparent;
}

/* ----------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------------- */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 30;
  padding: var(--space-4) var(--container-padding-x);
}
.site-header .inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.site-header .brand {
  font-family: var(--font-heading);
  color: var(--color-on-primary);
  font-size: 22px;
  font-weight: var(--fw-h3);
  letter-spacing: var(--ls-h3);
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
}
.site-header .brand img {
  /* logo doublé (40 → 80px) ; ramené progressivement sur petits écrans
     pour garder le CTA téléphone sur une seule ligne */
  height: clamp(48px, 12vw, 80px);
  width: auto;
  filter: brightness(0) invert(1);
}
.site-header nav {
  display: none;
  gap: var(--space-5);
  font-family: var(--font-nav);
  font-size: var(--fs-nav);
  letter-spacing: var(--ls-nav);
  text-transform: uppercase;
  color: var(--color-on-primary);
  align-items: center;
}
.site-header nav a {
  opacity: .9;
  transition: opacity var(--transition), color var(--transition);
  padding: 12px 0;
  display: inline-flex; align-items: center;
  min-height: 44px;
}
.site-header nav a:hover, .site-header nav a:focus-visible {
  opacity: 1; color: var(--color-primary);
}
@media (min-width: 768px) { .site-header nav { display: flex; } }

/* CTA téléphone — fond bleu identité (celui du mot « naturels » du hero) */
.site-header nav .btn-tel {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 1;
}
.site-header nav .btn-tel:hover,
.site-header nav .btn-tel:focus-visible {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
  opacity: 1;
}

.site-header .mobile-tel {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  background: var(--color-primary);
  color: var(--color-on-primary);
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-primary);
}
@media (min-width: 768px) { .site-header .mobile-tel { display: none; } }

/* Header en mode page sans hero (légales) — fond blanc, texte sombre */
body.page-flat .site-header {
  position: static;
  background: var(--color-surface);
  border-bottom: var(--border-thin);
}
body.page-flat .site-header .brand,
body.page-flat .site-header nav,
body.page-flat .site-header nav a { color: var(--color-heading); }
body.page-flat .site-header .brand img { filter: none; }
body.page-flat .site-header .mobile-tel {
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
body.page-flat .site-header nav .btn-tel,
body.page-flat .site-header nav .btn-tel:hover {
  color: var(--color-on-primary);
}
body.page-flat .site-header nav .btn-quiet {
  color: var(--color-heading);
  border-color: var(--color-border);
}
body.page-flat .site-header nav .btn-quiet:hover {
  background: var(--color-surface-alt);
  border-color: var(--color-primary);
}

/* ----------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: grid;
  align-items: center;
  color: var(--color-on-primary);
  padding: var(--space-9) var(--container-padding-x) var(--space-9);
  overflow: hidden;
  isolation: isolate;
}
.hero .bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(51,60,78,.55) 0%, rgba(51,60,78,.7) 100%);
}
.hero .inner { max-width: var(--site-width); margin: 0 auto; width: 100%; }
.hero .kicker { color: rgba(255,255,255,.85); }
.hero .kicker::before { background: rgba(255,255,255,.6); }
.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(40px, 9vw, 110px);
  font-weight: var(--fw-h1);
  line-height: 1.05;
  letter-spacing: -0.5px;
  margin: var(--space-5) 0;
  color: var(--color-on-primary);
  max-width: 18ch;
}
@media (min-width: 600px) { .hero h1 { letter-spacing: -1px; line-height: 1; } }
.hero h1 em { font-style: italic; font-weight: 200; color: var(--color-primary); }
.hero .lead {
  color: rgba(255,255,255,.85);
  font-size: clamp(18px, 2.4vw, 22px);
  line-height: 1.6;
  font-weight: var(--fw-body);
  max-width: 52ch;
  margin: 0 0 var(--space-7);
}
.hero .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero .scroll-cue {
  position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  display: inline-flex; flex-direction: column; align-items: center; gap: var(--space-2);
}
.hero .scroll-cue::before {
  content: ""; width: 1px; height: 40px; background: rgba(255,255,255,.5);
  animation: scroll-pulse 2s ease-in-out infinite;
}
.hero .scroll-cue svg {
  display: block; width: 18px; height: auto;
  animation: scroll-bob 2s ease-in-out infinite;
}
@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(5px); opacity: 1; }
}
@keyframes scroll-pulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----------------------------------------------------------------------------
   Sections génériques
   ---------------------------------------------------------------------------- */
.section { padding: var(--space-7) 0; }
@media (min-width: 768px)  { .section { padding: var(--space-8) 0; } }
@media (min-width: 1024px) { .section { padding: var(--space-9) 0; } }
.section + .section { border-top: 0; }

/* ----------------------------------------------------------------------------
   Section éditoriale (image + texte 5/7)
   ---------------------------------------------------------------------------- */
.editorial {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}
@media (min-width: 900px) {
  .editorial { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
  .editorial.reverse { grid-template-columns: 7fr 5fr; }
  .editorial.reverse > .ed-image { order: 2; }
}
.ed-image {
  position: relative;
  background: var(--color-surface-alt);
  aspect-ratio: 3 / 4;
}
.ed-image img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.ed-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(51,60,78,.15) 100%);
  pointer-events: none;
}
.ed-content > .kicker { margin-bottom: var(--space-4); }
.ed-content > .h2 { margin-top: var(--space-3); }
.ed-content p {
  font-size: 18px;
  line-height: 1.85;
  color: var(--color-heading);
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  font-weight: var(--fw-body);
}
.ed-content .drop-cap::first-letter {
  font-family: var(--font-heading);
  font-size: 4em;
  line-height: .95;
  font-weight: 200;
  float: left;
  padding: 8px 12px 0 0;
  color: var(--color-primary-deep);
}

/* ----------------------------------------------------------------------------
   Pull-quote
   ---------------------------------------------------------------------------- */
.pullquote {
  position: relative;
  padding: var(--space-7) 0;
  background: var(--color-surface-alt);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
}
@media (min-width: 768px)  { .pullquote { padding: var(--space-8) 0; } }
@media (min-width: 1024px) { .pullquote { padding: var(--space-9) 0; } }
.pullquote .container { position: relative; }
.pullquote::before {
  content: "“";
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-heading);
  font-size: clamp(120px, 18vw, 240px);
  line-height: 1;
  color: var(--color-primary);
  font-weight: 200;
  pointer-events: none;
  opacity: .9;
}
.pullquote blockquote {
  margin: 0 auto;
  max-width: 760px;
  text-align: center;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 200;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.4;
  color: var(--color-heading);
  letter-spacing: -0.3px;
  padding-top: var(--space-7);
}
.pullquote cite {
  display: block;
  margin-top: var(--space-5);
  font-family: var(--font-nav);
  font-size: 12px;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-text);
}

/* ----------------------------------------------------------------------------
   Cards "publics"
   ---------------------------------------------------------------------------- */
.publics-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-7);
}
@media (min-width: 900px) {
  .publics-head { grid-template-columns: auto 1fr; align-items: end; gap: var(--space-7); }
}
.publics-head .lead { margin: 0; }

.publics {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 700px)  { .publics { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .publics { grid-template-columns: repeat(4, 1fr); } }

.public-card {
  background: var(--color-surface);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.public-card .photo {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: var(--color-surface-alt);
}
.public-card .photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.public-card:hover .photo img,
.public-card:focus-within .photo img {
  transform: scale(1.05);
}
.public-card .photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(51,60,78,.55) 100%);
  transition: background var(--transition);
  pointer-events: none;
}
.public-card:hover .photo::after,
.public-card:focus-within .photo::after {
  background: linear-gradient(180deg, transparent 30%, rgba(51,60,78,.75) 100%);
}
.public-card .num {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--color-on-primary);
  text-transform: uppercase;
  opacity: .85;
}
.public-card .label {
  position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); z-index: 2;
  color: var(--color-on-primary);
}
.public-card .label .h3 { color: var(--color-on-primary); margin-bottom: 6px; }
.public-card .label p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  margin: var(--space-2) 0 0;
}
/* Sur device avec hover réel : on cache puis révèle. Sur tactile : toujours visible. */
@media (hover: hover) and (pointer: fine) {
  .public-card .label p {
    max-height: 0; margin: 0; overflow: hidden;
    transition: max-height .35s ease, margin-top .35s ease;
  }
  .public-card:hover .label p,
  .public-card:focus-within .label p { max-height: 200px; margin-top: var(--space-2); }
}

/* ----------------------------------------------------------------------------
   Section "Conseils" sombre
   ---------------------------------------------------------------------------- */
.section-conseils {
  padding: var(--space-7) 0;
  background: var(--color-heading);
  color: var(--color-on-primary);
  text-align: center;
}
@media (min-width: 768px)  { .section-conseils { padding: var(--space-8) 0; } }
@media (min-width: 1024px) { .section-conseils { padding: var(--space-9) 0; } }
.section-conseils .kicker { color: rgba(255,255,255,.85); justify-content: center; display: inline-flex; }
.section-conseils .kicker::before { background: rgba(255,255,255,.6); }
.section-conseils .h2 { color: var(--color-on-primary); margin-top: var(--space-3); }
.section-conseils p {
  max-width: 60ch;
  margin: 0 auto var(--space-4);
  color: rgba(255,255,255,.85);
  font-size: 18px;
  line-height: 1.85;
  font-weight: var(--fw-body);
}
.section-conseils .rule::before, .section-conseils .rule::after { background: rgba(255,255,255,.25); }
.section-conseils .rule .dot { background: var(--color-primary); }

/* ----------------------------------------------------------------------------
   Cabinet
   ---------------------------------------------------------------------------- */
.cabinet-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}
@media (min-width: 900px) {
  .cabinet-grid { grid-template-columns: 5fr 7fr; gap: var(--space-7); align-items: stretch; }
}
.cabinet-info {
  background: var(--color-surface);
  padding: var(--space-7) var(--space-6);
  border: var(--border-thin);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.cabinet-info dl { margin: 0; padding: 0; }
.cabinet-info .info-block { padding: var(--space-4) 0; border-top: var(--border-thin); }
.cabinet-info .info-block:first-of-type { border-top: 0; padding-top: 0; }
.cabinet-info .info-block dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}
.cabinet-info .info-block dd { margin: 0; }
.cabinet-info .info-block dd address {
  font-style: normal;
  font-size: 18px;
  line-height: 1.7;
  color: var(--color-heading);
}
.cabinet-info .info-block .phone {
  font-family: var(--font-heading);
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 300;
  color: var(--color-heading);
  letter-spacing: 1px;
  display: inline-block;
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.cabinet-info .info-block .phone:hover,
.cabinet-info .info-block .phone:focus-visible {
  color: var(--color-primary-deep);
  border-color: var(--color-primary-hover);
}
.cabinet-info .actions { margin-top: var(--space-5); }

.cabinet-map {
  background: var(--color-surface-alt);
  min-height: 480px;
  position: relative;
  overflow: hidden;
  border: var(--border-thin);
}
.cabinet-map iframe {
  width: 100%; height: 100%;
  border: 0;
  position: absolute; inset: 0;
}

/* ----------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------------- */
.site-footer {
  padding: var(--space-8) var(--container-padding-x);
  border-top: var(--border-thin);
  background: var(--color-surface);
  color: var(--color-text-muted);
}
.site-footer .inner {
  max-width: var(--site-width);
  margin: 0 auto;
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .site-footer .inner { grid-template-columns: 2fr 1fr 1fr; gap: var(--space-7); } }
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 var(--space-3);
  font-weight: var(--fw-strong);
}
.site-footer .brand {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 300;
  color: var(--color-heading);
  display: block;
  margin-bottom: var(--space-3);
}
.site-footer p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.6; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer ul li { padding: 4px 0; font-size: 14px; }
.site-footer a { color: var(--color-link); transition: color var(--transition); }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-primary); }
.site-footer .legal {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-thin);
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--color-text);
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* ----------------------------------------------------------------------------
   Pages prose (mentions légales, politique de confidentialité)
   ---------------------------------------------------------------------------- */
.prose-hero {
  background: var(--color-surface-alt);
  border-bottom: var(--border-thin);
  padding: var(--space-8) var(--container-padding-x);
}
.prose-hero .inner {
  max-width: var(--site-width);
  margin: 0 auto;
}
.prose-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(32px, 5vw, 56px);
  font-weight: var(--fw-h2);
  letter-spacing: -0.5px;
  color: var(--color-heading);
  margin: var(--space-3) 0 var(--space-2);
  line-height: var(--lh-h2);
}
.prose-hero p { margin: 0; color: var(--color-text); font-size: 18px; max-width: 60ch; }

.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-7) var(--container-padding-x) var(--space-9);
  font-size: 17px;
  line-height: 1.85;
  color: var(--color-heading);
}
.prose h2 {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: var(--fw-h3);
  color: var(--color-heading);
  margin: var(--space-7) 0 var(--space-3);
  letter-spacing: -0.2px;
}
.prose h2:first-of-type { margin-top: 0; }
.prose h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-heading);
  margin: var(--space-5) 0 var(--space-2);
}
.prose p { margin: 0 0 var(--space-3); }
.prose ul, .prose ol { padding-left: 1.5em; margin: 0 0 var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose a {
  color: var(--color-primary-deep);
  border-bottom: 1px solid var(--color-primary);
  transition: color var(--transition);
}
.prose a:hover, .prose a:focus-visible { color: var(--color-primary-hover); }
.prose .meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.prose .placeholder {
  background: rgba(59, 175, 191, .08);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-3) var(--space-4);
  font-size: 15px;
  color: var(--color-heading);
  margin: var(--space-3) 0;
  border-radius: 0;
}
.prose .placeholder strong { color: var(--color-primary-deep); }

/* ----------------------------------------------------------------------------
   Reveal on scroll
   ---------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* ----------------------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero .scroll-cue::before { animation: none; opacity: .5; }
  .hero .scroll-cue svg { animation: none; opacity: .7; }
  .public-card .photo img { transition: none !important; }
  .public-card:hover .photo img,
  .public-card:focus-within .photo img { transform: none !important; }
}