:root {
  --ivory: #faf9f6;
  --ink: #1c1d1c;
  --gold: #b29462;
  --line: rgba(129, 116, 91, .24);
  --soft: #696862;
  --serif: "Italiana", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
}

@property --float-y {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
body { margin: 0; background: var(--ivory); color: var(--ink); font-family: var(--sans); }
main { position: relative; width: 100%; height: 100svh; overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }

.home-screen,
.services-screen { position: absolute; inset: 0; width: 100%; min-height: 0; height: 100svh; overflow: hidden; transition: opacity .48s ease, visibility .48s ease; }
.home-screen { z-index: 2; opacity: 1; visibility: visible; pointer-events: auto; }
.services-screen { z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; }
body.show-services .home-screen { opacity: 0; visibility: hidden; pointer-events: none; }
body.show-services .services-screen { z-index: 3; opacity: 1; visibility: visible; pointer-events: auto; }

/* Première page — l'ancienne marge photographique devient l'accueil. */
.home-screen { color: #fff; background: #1c1d1c; }
.home-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.56) contrast(1.08) brightness(.7); animation: home-breathe 16s ease-in-out infinite alternate; }
.home-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.45), rgba(0,0,0,.1) 50%, rgba(0,0,0,.48)), linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.5)); }
.home-mark { --diameter: min(390px, 44vw, calc(100svh - 170px)); position: absolute; left: 50%; top: 47%; width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; padding: clamp(34px, 5vw, 68px); border: 1px solid rgba(215,190,143,.58); border-radius: 50%; overflow: hidden; display: grid; place-content: center; text-align: center; background: rgba(250,249,246,.9); color: var(--ink); transform: translate(-50%,-50%); backdrop-filter: blur(7px); box-shadow: 0 26px 80px rgba(0,0,0,.2); transition: background .45s, border-color .45s, transform .45s, box-shadow .45s; }
.home-mark-identity, .home-mark-invitation { grid-area: 1 / 1; align-self: center; justify-self: center; transition: opacity .38s, transform .48s; }
.home-mark-identity { display: grid; place-items: center; width: 100%; }
.home-mark img { width: 100%; height: auto; }
.home-mark-identity i { width: 30px; height: 1px; margin: 25px auto 14px; background: var(--gold); }
.home-mark-identity small { margin: 0; color: var(--gold); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; }
.home-mark-invitation { opacity: 0; color: #fff; font: 400 clamp(24px, 3.2vw, 43px)/1.18 var(--serif); letter-spacing: .03em; transform: scale(.86); }
.home-mark:is(:hover,:focus-visible) { background: rgba(28,29,28,.94); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.025); box-shadow: 0 30px 90px rgba(0,0,0,.3); }
.home-mark:is(:hover,:focus-visible) .home-mark-identity { opacity: 0; transform: scale(.88); }
.home-mark:is(:hover,:focus-visible) .home-mark-invitation { opacity: 1; transform: scale(1); }
.home-mark:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }
.satellite-card { position: absolute; z-index: 2; border: 1px solid rgba(215,190,143,.7); border-radius: 50%; background: rgba(250,249,246,.9); color: var(--ink); backdrop-filter: blur(7px); box-shadow: 0 15px 45px rgba(0,0,0,.18); }
.home-contact { --diameter: clamp(126px, 13vw, 166px); left: clamp(28px, 7vw, 112px); top: clamp(28px, 8vh, 88px); width: var(--diameter); height: var(--diameter); display: grid; place-items: center; padding: 25px; overflow: hidden; transition: transform .35s, background .35s; }
.home-contact img { width: 88%; }
.home-contact strong { display: none; color: #fff; font: 54px/1 var(--serif); }
.home-contact:is(:hover,:focus-visible,:active) { background: var(--ink); transform: rotate(-3deg) translate(5px,5px); }
.home-contact:is(:hover,:focus-visible,:active) img { display: none; }
.home-contact:is(:hover,:focus-visible,:active) strong { display: block; }
.home-coordinates { --diameter: clamp(164px, 15vw, 194px); right: clamp(28px, 7vw, 112px); bottom: clamp(54px, 9vh, 92px); width: var(--diameter); height: var(--diameter); padding: 34px; display: grid; place-items: center; overflow: hidden; transition: transform .35s, background .35s, color .35s; }
.coordinates-logo, .coordinates-content { grid-area: 1 / 1; transition: opacity .35s, transform .42s; }
.coordinates-logo { width: 82%; }
.coordinates-content { display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(.86); transition: opacity .35s, visibility .35s, transform .42s; }
.coordinates-content span { margin-bottom: 11px; color: var(--gold); font-size: 8px; letter-spacing: .25em; text-transform: uppercase; }
.coordinates-content a { width: max-content; max-width: 100%; font-size: 9px; line-height: 1.6; }
.coordinates-content a + a { margin-top: 8px; padding-bottom: 2px; border-bottom: 1px solid rgba(178,148,98,.6); }
.coordinates-content small { margin-top: 11px; color: rgba(255,255,255,.8); font-size: 8px; line-height: 1.5; letter-spacing: .07em; text-transform: uppercase; }
.home-coordinates:is(:hover,:focus,:focus-within) { background: var(--ink); color: #fff; transform: rotate(2deg) translate(-6px,-6px); outline: none; }
.home-coordinates:is(:hover,:focus,:focus-within) .coordinates-logo { opacity: 0; transform: scale(.84); }
.home-coordinates:is(:hover,:focus,:focus-within) .coordinates-content { opacity: 1; visibility: visible; pointer-events: auto; transform: scale(1); }
.legal-trigger { --diameter: clamp(62px, 6.2vw, 74px); position: absolute; z-index: 4; left: calc(50% - min(25vw, 300px)); top: 69%; width: var(--diameter); height: var(--diameter); padding: 0; border: 1px solid rgba(215,190,143,.7); border-radius: 50%; display: grid; place-items: center; background: rgba(250,249,246,.9); color: var(--ink); backdrop-filter: blur(7px); box-shadow: 0 15px 45px rgba(0,0,0,.18); transform: translate(-50%,-50%); cursor: pointer; transition: background .35s, border-color .35s, transform .35s, box-shadow .35s; }
.legal-symbol, .legal-label { grid-area: 1 / 1; transition: opacity .3s, transform .38s; }
.legal-symbol { color: var(--ink); font: clamp(23px, 2.5vw, 30px)/1 var(--serif); }
.legal-label { width: 90%; opacity: 0; color: #fff; font-size: clamp(5px, .52vw, 6.5px); font-weight: 500; letter-spacing: .1em; text-align: center; text-transform: uppercase; transform: scale(.78); }
.legal-trigger:is(:hover,:focus-visible) { background: var(--ink); border-color: var(--gold); transform: translate(-50%,-50%) scale(1.08) rotate(3deg); box-shadow: 0 18px 48px rgba(0,0,0,.24); outline: none; }
.legal-trigger:is(:hover,:focus-visible) .legal-symbol { opacity: 0; transform: scale(.75); }
.legal-trigger:is(:hover,:focus-visible) .legal-label { opacity: 1; transform: scale(1); }
.legal-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.legal-panel { width: min(680px, calc(100vw - 38px)); padding: clamp(38px, 6vw, 72px); border: 1px solid rgba(178,148,98,.62); overflow: visible; background: rgba(250,249,246,.98); color: var(--ink); box-shadow: 0 34px 110px rgba(20,18,15,.32); }
.legal-panel::backdrop { background: rgba(18,18,17,.62); backdrop-filter: blur(5px); }
.legal-close { position: absolute; left: 50%; bottom: -32px; width: clamp(64px, 7vw, 76px); aspect-ratio: 1; padding: 14px; border: 1px solid rgba(178,148,98,.7); border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transform: translateX(-50%); cursor: pointer; box-shadow: 0 12px 30px rgba(38,34,28,.13); transition: background .35s, transform .35s, box-shadow .35s; }
.legal-close img, .legal-close span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.legal-close img { width: 100%; height: auto; }
.legal-close span { opacity: 0; color: #fff; font-size: 7px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: scale(.78); }
.legal-close:is(:hover,:focus-visible) { background: var(--ink); transform: translateX(-50%) scale(1.08) rotate(-3deg); box-shadow: 0 16px 38px rgba(38,34,28,.2); outline: none; }
.legal-close:is(:hover,:focus-visible) img { opacity: 0; transform: scale(.8); }
.legal-close:is(:hover,:focus-visible) span { opacity: 1; transform: scale(1); }
.legal-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }
.legal-kicker { color: var(--gold); font-size: 8px; letter-spacing: .22em; text-transform: uppercase; }
.legal-panel h2 { margin: 14px 0 34px; font: 400 clamp(27px, 4vw, 42px)/1.1 var(--serif); }
.legal-columns { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(24px, 5vw, 54px); }
.legal-columns h3 { margin: 0 0 12px; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.legal-columns p { margin: 0; color: var(--soft); font-size: 10px; line-height: 1.75; }
.legal-mail { display: inline-block; margin-top: 30px; padding-bottom: 3px; border-bottom: 1px solid var(--gold); font-size: 9px; letter-spacing: .04em; }

/* Deuxième page — constellation libre. */
.services-screen {
  background: #17130f url("assets/boulier-antique.png") center / cover no-repeat;
}
.services-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 48%, rgba(20,16,12,.26) 0, rgba(13,10,8,.48) 58%, rgba(5,4,3,.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,.26), rgba(0,0,0,.05) 50%, rgba(0,0,0,.34));
}
.constellation { --diameter: min(82vw, 900px, calc(100svh - 70px)); position: absolute; z-index: 1; left: 50%; top: 50%; width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; transform: translate(-50%,-50%); }
.ring { position: absolute; left: 50%; top: 50%; border: 1px solid var(--line); border-radius: 50%; transform: translate(-50%,-50%); transition: opacity .5s, transform .6s, border-color .5s, filter .5s; animation: ring-breathe 12s ease-in-out infinite alternate; }
.services-screen .ring { border-color: rgba(220,194,145,.38); filter: drop-shadow(0 1px 5px rgba(0,0,0,.35)); }
.ring::before, .ring::after { content: ""; position: absolute; width: 7px; height: 7px; border: 1px solid var(--gold); border-radius: 50%; background: var(--ivory); }
.ring::before { left: 10%; top: 18%; }
.ring::after { right: 6%; bottom: 25%; }
.ring-outer { width: 64%; height: 64%; }
.ring-inner { width: 47%; height: 47%; border-color: rgba(178,148,98,.38); animation-delay: -5s; animation-duration: 15s; }
.identity { position: absolute; z-index: 3; left: 50%; top: 50%; width: 47%; height: 47%; min-width: 0; min-height: 0; padding: clamp(42px, 7vw, 76px); border: 0; border-radius: 50%; overflow: hidden; display: grid; place-items: center; text-align: center; background: var(--ivory); transform: translate(-50%,-50%); }
.identity img, .central-quote { grid-area: 1 / 1; transition: opacity .4s, transform .5s; }
.identity img { width: 100%; height: auto; }
.central-quote { width: 82%; margin: 0; opacity: 0; transform: scale(.86); }
.central-quote p { margin: 0; font: 400 clamp(13px, 1.7vw, 21px)/1.48 var(--serif); letter-spacing: .025em; }
.central-quote cite { display: block; margin-top: 18px; color: var(--gold); font-size: clamp(6px, .65vw, 8px); font-style: normal; letter-spacing: .2em; text-transform: uppercase; }
.identity:is(:hover,:focus-visible) img { opacity: 0; transform: scale(.88); }
.identity:is(:hover,:focus-visible) .central-quote { opacity: 1; transform: scale(1); }
.identity:focus-visible { outline: 1px solid var(--gold); outline-offset: -1px; }
.home-orb { --diameter: clamp(48px, 5.7vw, 64px); position: absolute; z-index: 5; left: 66%; top: 32%; width: var(--diameter); height: var(--diameter); padding: 11px; border: 1px solid rgba(178,148,98,.65); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ivory); transform: translate(-50%,-50%); cursor: pointer; box-shadow: 0 10px 25px rgba(38,34,28,.1); transition: background .35s, transform .35s, box-shadow .35s; }
.home-orb img, .home-orb span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.home-orb img { width: 100%; height: auto; }
.home-orb span { opacity: 0; color: #fff; font-size: 6px; letter-spacing: .12em; text-transform: uppercase; transform: scale(.8); }
.home-orb:is(:hover,:focus-visible) { background: var(--ink); transform: translate(-50%,-50%) scale(1.08); box-shadow: 0 15px 34px rgba(38,34,28,.18); }
.home-orb:is(:hover,:focus-visible) img { opacity: 0; transform: scale(.82); }
.home-orb:is(:hover,:focus-visible) span { opacity: 1; transform: scale(1); }
.home-orb:focus-visible, .service-orb:focus-visible, .detail-back:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; }

.service-orb { --x: 50%; --y: 50%; --delay: 0s; --pull-x: 0px; --pull-y: 0px; --float-y: 0px; --diameter: clamp(58px, 7.4vw, 82px); position: absolute; z-index: 4; left: var(--x); top: var(--y); width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; padding: 0; border: 1px solid rgba(178,148,98,.55); border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--ink); color: #fff; box-shadow: 0 11px 30px rgba(38,34,28,.1); transform: translate(-50%,-50%) translate(var(--pull-x), calc(var(--pull-y) + var(--float-y))) scale(1); cursor: pointer; animation: float 6.8s var(--delay) ease-in-out infinite; transition: background .35s, border-color .35s, box-shadow .35s, opacity .45s, filter .45s, transform .18s ease-out; }
.service-orb .orb-icon,
.service-orb .orb-title { grid-area: 1 / 1; transition: opacity .28s, transform .35s; }
.service-orb .orb-icon { font: clamp(24px, 3vw, 34px)/1 var(--serif); }
.service-orb .orb-title { width: 88%; opacity: 0; font-size: clamp(5.5px, .67vw, 8px); font-weight: 500; line-height: 1.28; letter-spacing: .07em; text-align: center; text-transform: uppercase; transform: scale(.78); }
.service-orb:is(:hover,:focus-visible,.is-opening) { background: var(--gold); border-color: var(--gold); box-shadow: 0 18px 44px rgba(86,67,34,.24); transform: translate(-50%,-50%) translate(var(--pull-x), calc(var(--pull-y) + var(--float-y))) scale(1.11); }
.service-orb:is(:hover,:focus-visible) .orb-icon { opacity: 0; transform: rotate(5deg) scale(.76); }
.service-orb:is(:hover,:focus-visible) .orb-title { opacity: 1; transform: scale(1); }
.service-orb.is-opening .orb-icon { opacity: 0; transform: rotate(5deg) scale(.76); }
.service-orb.is-opening .orb-title { opacity: 1; transform: scale(1); }
.constellation.orb-engaged .ring { border-color: rgba(178,148,98,.36); filter: drop-shadow(0 0 8px rgba(178,148,98,.08)); }
.constellation.orb-engaged .service-orb:not(:hover) { opacity: .68; filter: saturate(.58); }
.service-1 { --x: 50%; --y: 6%; --delay: -.4s; }
.service-2 { --x: 82%; --y: 22%; --delay: -2.2s; }
.service-3 { --x: 94%; --y: 56%; --delay: -1.1s; }
.service-4 { --x: 75%; --y: 87%; --delay: -3.4s; }
.service-5 { --x: 25%; --y: 87%; --delay: -1.8s; }
.service-6 { --x: 6%; --y: 56%; --delay: -4s; }
.service-7 { --x: 18%; --y: 22%; --delay: -2.8s; }

.service-detail { --origin-x: 0px; --origin-y: 0px; --diameter: min(54%, 470px); position: absolute; z-index: 10; left: 50%; top: 50%; width: var(--diameter); height: var(--diameter); min-width: 0; min-height: 0; padding: clamp(54px, 7vw, 84px); border: 1px solid var(--gold); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(250,249,246,.98); box-shadow: 0 30px 90px rgba(60,48,29,.18), 0 0 0 14px rgba(178,148,98,.05); opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--origin-x)),calc(-50% + var(--origin-y))) scale(.12); transform-origin: center; transition: opacity .35s, visibility .45s, transform .7s cubic-bezier(.18,.86,.22,1); }
.detail-icon { color: var(--gold); font: 34px/1 var(--serif); }
.service-detail h2 { max-width: 82%; margin: 17px 0 14px; font-size: clamp(10px, 1.2vw, 14px); font-weight: 500; line-height: 1.42; letter-spacing: .145em; text-transform: uppercase; }
.service-detail p { max-width: 345px; margin: 0; color: #575753; font-size: clamp(9px, .96vw, 12px); font-weight: 300; line-height: 1.72; letter-spacing: .012em; }
.service-detail p em { display: block; margin-top: 10px; color: var(--gold); font-size: .9em; font-style: normal; }
.detail-back { position: absolute; left: 50%; bottom: -31px; width: clamp(64px, 7vw, 78px); aspect-ratio: 1; padding: 14px; border: 1px solid rgba(178,148,98,.7); border-radius: 50%; display: grid; place-items: center; background: var(--ivory); transform: translateX(-50%); cursor: pointer; transition: transform .35s, background .35s; }
.detail-back img,
.detail-back span { grid-area: 1 / 1; transition: opacity .32s, transform .38s; }
.detail-back img { z-index: 1; width: 100%; opacity: 1; }
.detail-back span { z-index: 2; opacity: 0; color: #fff; font-size: 8px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; transform: scale(.8); }
.detail-back:hover,
.detail-back:focus-visible { background: var(--ink); transform: translateX(-50%) scale(1.08) rotate(-3deg); }
.detail-back:hover img,
.detail-back:focus-visible img { opacity: 0; transform: scale(.82); }
.detail-back:hover span,
.detail-back:focus-visible span { opacity: 1; transform: scale(1); }
.constellation.detail-open .service-detail { opacity: 1; visibility: visible; transform: translate(-50%,-50%) scale(1); }
.constellation.detail-open .service-orb, .constellation.detail-open .identity, .constellation.detail-open .home-orb, .constellation.detail-open .ring { opacity: .1; pointer-events: none; }
.constellation.detail-open .ring { transform: translate(-50%,-50%) scale(1.08); }
.constellation.opening-detail .service-orb:not(.is-opening), .constellation.opening-detail .identity, .constellation.opening-detail .home-orb, .constellation.opening-detail .ring { opacity: .35; }

@keyframes float { 0%,100% { --float-y: 0px; } 50% { --float-y: -7px; } }
@keyframes ring-breathe { from { opacity: .72; } to { opacity: 1; filter: drop-shadow(0 0 8px rgba(178,148,98,.08)); } }
@keyframes home-breathe { from { transform: scale(1); } to { transform: scale(1.035); } }

@media (max-width: 700px) {
  .home-mark { --diameter: clamp(156px, 54vmin, 300px); top: 46%; padding: clamp(28px, 10vmin, 42px); }
  .home-contact { --diameter: clamp(70px, 23vmin, 108px); left: max(16px, env(safe-area-inset-left)); top: max(16px, env(safe-area-inset-top)); padding: clamp(14px, 5vmin, 20px); }
  .home-contact strong { font-size: clamp(34px, 13vmin, 48px); }
  .home-coordinates { --diameter: clamp(94px, 31vmin, 144px); right: max(16px, env(safe-area-inset-right)); bottom: max(24px, calc(env(safe-area-inset-bottom) + 12px)); padding: clamp(18px, 6vmin, 25px); }
  .home-coordinates span { margin-bottom: 7px; }
  .home-coordinates a { font-size: 7.5px; }
  .home-coordinates small { margin-top: 7px; font-size: 6.5px; }
  .legal-trigger { --diameter: clamp(36px, 11vmin, 58px); left: calc(50% - min(32vmin, 142px)); top: 66%; }
  .legal-label { font-size: 5px; letter-spacing: .07em; }
  .constellation { --diameter: min(calc(100vw - 20px), calc(100svh - 20px)); top: 50%; }
  .ring-outer { width: 66%; height: 66%; }
  .ring-inner { width: 48%; height: 48%; }
  .identity { width: 48%; height: 48%; padding: clamp(28px, 9vmin, 54px); }
  .central-quote { width: 92%; }
  .central-quote p { font-size: clamp(10px, 3vw, 15px); }
  .central-quote cite { margin-top: 12px; font-size: 6px; }
  .home-orb { --diameter: clamp(32px, 10.5vmin, 46px); left: 67%; top: 32%; padding: clamp(6px, 2.1vmin, 8px); }
  .home-orb span { font-size: 5px; letter-spacing: .08em; }
  .service-orb { --diameter: clamp(36px, 11.5vmin, 50px); }
  .service-orb .orb-icon { font-size: clamp(17px, 5.4vmin, 24px); }
  .service-orb .orb-title { font-size: clamp(4.1px, 1.28vmin, 5.6px); letter-spacing: .035em; }
  .service-1 { --y: 8%; }
  .service-2 { --x: 80%; --y: 20%; }
  .service-3 { --x: 91%; --y: 53%; }
  .service-4 { --x: 74%; --y: 88%; }
  .service-5 { --x: 26%; --y: 88%; }
  .service-6 { --x: 9%; --y: 53%; }
  .service-7 { --x: 20%; --y: 20%; }
  .service-detail { --diameter: min(82vw, calc(100svh - 70px), 390px); padding: clamp(40px, 13vmin, 50px); }
  .service-detail h2 { max-width: 90%; font-size: 11px; }
  .service-detail p { font-size: clamp(8.5px, 2.5vw, 11px); }
  .detail-back { bottom: -27px; }
  .legal-columns { grid-template-columns: 1fr; gap: 25px; }
  .legal-panel { max-height: calc(100svh - 72px); padding: 40px 30px 64px; overflow-y: auto; }
  .legal-close { bottom: 8px; }
}

@media (max-width: 420px) {
  .home-mark { --diameter: 54vmin; padding: clamp(27px, 9.5vmin, 34px); }
  .home-contact { --diameter: 23vmin; }
  .home-coordinates { --diameter: 31vmin; padding: clamp(17px, 5.8vmin, 22px); }
  .constellation { --diameter: min(calc(100vw - 18px), calc(100svh - 24px)); }
  .service-detail { --diameter: min(82vw, calc(100svh - 70px)); padding: clamp(38px, 12vmin, 44px); }
  .detail-icon { font-size: 28px; }
}

@media (max-height: 700px) and (min-width: 701px) {
  .home-mark { --diameter: min(330px, calc(100svh - 150px)); }
  .constellation { --diameter: min(74vw, calc(100svh - 86px)); }
  .home-contact { --diameter: 124px; }
  .home-coordinates { --diameter: 158px; padding: 29px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}