/* Palette sampled from Stesa's projects */
:root {
  --linen:    #efebe5;
  --greige:   #c4bbb4;
  --oak:      #b8a18f;
  --walnut:   #9b7b61;
  --brass:    #b08d57;
  --umber:    #59473a;
  --espresso: #281e18;

  --pad: clamp(16px, 4vw, 56px);
  --ease: cubic-bezier(.19, 1, .22, 1);
  --ease-io: cubic-bezier(.77, 0, .18, 1);
  --serif: "Cormorant Garamond", Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  background: var(--espresso);
  scroll-behavior: smooth;
}
html.locked { overflow: hidden; }

body {
  background: var(--espresso);
  color: #fff;
  font-family: "Jost", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------------------------------------------------------
   Logo — "ST∃SA / design studio", sized by font-size on .logo
---------------------------------------------------------------- */
.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  font-weight: 300;
  line-height: 1;
}
.wordmark {
  display: flex;
  justify-content: space-between;
  gap: .16em;
  line-height: .9;
}
.flip { display: inline-block; transform: scaleX(-1); }
.mask { display: inline-block; overflow: hidden; padding-bottom: .04em; }
.ch { display: inline-block; }
.logo .rule {
  height: 1px;
  margin: .13em 0 .1em;
  background: currentColor;
}
.logo .sub {
  font-size: .222em;
  letter-spacing: .9em;
  margin-right: -.9em;
  text-align: center;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   Navigation
---------------------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px var(--pad);
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1s var(--ease) 1.4s, transform 1s var(--ease) 1.4s;
}
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 140px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(rgba(20, 14, 10, .38), transparent);
}
html.go .nav { opacity: 1; transform: none; }

.nav-logo { font-size: 1.3rem; }
.nav-logo .wordmark { gap: .22em; }

.nav-links { display: flex; gap: clamp(20px, 3vw, 36px); }
.nav-links a,
.gallery-close {
  position: relative;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: 6px 0;
}
.nav-links a::after,
.gallery-close::after {
  content: "";
  position: absolute;
  left: 0; right: .28em; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .6s var(--ease);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.gallery-close:hover::after,
.gallery-close:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* ---------------------------------------------------------------
   Full-screen screens (hero, projects, contact)
   Without JS they simply stack as sticky panels. With JS (html.engine)
   each is a fixed layer and main.js moves between them.
---------------------------------------------------------------- */
.panel {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--espresso);
}
.panel-inner {
  position: absolute;
  inset: 0;
  will-change: transform;
  backface-visibility: hidden;
}
/* darkens a screen as the next one covers it */
.panel-dim {
  position: absolute;
  inset: 0;
  background: #0d0907;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

html.engine,
html.engine body { height: 100%; overflow: hidden; overscroll-behavior: none; }
.engine .panel,
.engine .contact {
  position: fixed;
  inset: 0;
  height: auto;
  will-change: transform;
}
/* the contact page may be taller than a small phone: it scrolls on its own */
.engine .contact {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.engine .contact::-webkit-scrollbar { display: none; }
/* screens two or more away are switched off, so they hold no GPU memory */
.engine .is-off { visibility: hidden; }

/* Dark fade used for long jumps between screens (sits under the nav) */
.curtain {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: var(--espresso);
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}
.curtain.is-on { opacity: 1; pointer-events: auto; }

/* ---------------------------------------------------------------
   Hero
---------------------------------------------------------------- */
.hero-slides, .hero-slide { position: absolute; inset: 0; }
.hero-slide {
  opacity: 0;
  /* hidden once faded out, so idle slides don't hold full-screen GPU layers */
  visibility: hidden;
  transition: opacity 1.8s ease, visibility 0s linear 1.8s;
  will-change: opacity;
}
.hero-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1.8s ease; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.14);
  transition: transform 9s cubic-bezier(.2, .6, .35, 1);
  /* stay on its own layer, or the photo "pops" when the 9s zoom ends */
  will-change: transform;
  backface-visibility: hidden;
}
.hero-slide.is-active img { transform: scale(1); }

.hero-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(28, 20, 15, .38), transparent 75%),
    linear-gradient(to bottom, rgba(20, 14, 10, .25), rgba(20, 14, 10, .12) 40%, rgba(20, 14, 10, .5));
}

.hero-logo {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(3.2rem, 13vw, 9rem);
  text-shadow: 0 2px 40px rgba(20, 14, 10, .25);
}
.hero-logo .ch {
  transform: translateY(105%);
  transition: transform 1.5s var(--ease);
}
html.go .hero-logo .ch { transform: none; transition-delay: calc(.3s + var(--i) * .08s); }
.hero-logo .rule {
  transform: scaleX(0);
  transition: transform 1.6s var(--ease) .85s;
  box-shadow: 0 0 20px rgba(20, 14, 10, .2);
}
html.go .hero-logo .rule { transform: scaleX(1); }
.hero-logo .sub {
  opacity: 0;
  filter: blur(8px);
  transition: opacity 1.6s var(--ease) 1.1s, filter 1.6s var(--ease) 1.1s;
}
html.go .hero-logo .sub { opacity: 1; filter: none; }

.hero-foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(22px, 4vh, 40px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 1.4s var(--ease) 1.7s;
}
html.go .hero-foot { opacity: 1; }

.hero-current {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
.hero-bar {
  position: relative;
  width: 64px;
  height: 1px;
  background: rgba(255, 255, 255, .3);
  overflow: hidden;
}
.hero-bar i {
  position: absolute;
  inset: 0;
  background: #fff;
  transform-origin: left;
  transform: scaleX(0);
}
.hero-bar i.run { animation: bar var(--hero-time, 6s) linear forwards; }
.hero-label { min-width: 8ch; transition: opacity .6s ease; }

/* ---------------------------------------------------------------
   Project panels
---------------------------------------------------------------- */
.project-link { position: absolute; inset: 0; display: block; }

.project-media {
  position: absolute;
  inset: 0;
  background: var(--tone, var(--umber));
  will-change: transform;
  backface-visibility: hidden;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.8s var(--ease);
  /* own layer, or the hover zoom re-rasters the whole photo the moment a
     panel slides under a resting pointer mid-scroll (and again when it ends) */
  will-change: transform;
  backface-visibility: hidden;
}
.project-link:hover .project-media img { transform: scale(1.035); }

.project-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(20, 14, 10, .72), rgba(20, 14, 10, .18) 42%, transparent 65%),
    linear-gradient(to bottom, rgba(20, 14, 10, .3), transparent 22%);
}

.project-text {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 7vh, 72px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 56px;
}
.project-index {
  display: block;
  margin-bottom: 18px;
  font-size: .68rem;
  letter-spacing: .3em;
}
.project-name {
  font-weight: 300;
  font-size: clamp(2.6rem, 7.5vw, 6.6rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.project-name .line { display: block; overflow: hidden; padding-bottom: .06em; }
.project-name .line > span { display: block; transform: translateY(105%); transition: transform 1.4s var(--ease); }

.project-side { max-width: 34ch; flex-shrink: 0; }
.project-kind {
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.project-desc {
  margin-top: 12px;
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .82);
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.arrow {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 1px;
  background: currentColor;
  transition: width .7s var(--ease);
}
.arrow::after {
  content: "";
  position: absolute;
  right: 0; top: -3px;
  width: 7px; height: 7px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.project-link:hover .arrow,
.g-next:hover .arrow { width: 60px; }

.project-index, .project-side > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
}
.project.is-in .project-index,
.project.is-in .project-side > * { opacity: 1; transform: none; }
.project.is-in .project-name .line > span { transform: none; }
.project.is-in .project-name .line:nth-child(2) > span { transition-delay: .08s; }
.project.is-in .project-side > :nth-child(1) { transition-delay: .25s; }
.project.is-in .project-side > :nth-child(2) { transition-delay: .35s; }
.project.is-in .project-side > :nth-child(3) { transition-delay: .45s; }

/* ---------------------------------------------------------------
   Contact
---------------------------------------------------------------- */
.contact {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: var(--espresso);
}
.contact-page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120px var(--pad) 140px;
  overflow: hidden;
  text-align: center;
}
.contact-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* zero-size marker sitting on the headline's baseline (main.js lines the shelf up to it) */
.contact-title .baseline { display: inline-block; width: 0; height: 0; }
.contact-shade {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(28, 20, 15, .55), rgba(28, 20, 15, .78));
}
.contact-body { position: relative; }

.eyebrow {
  font-size: .68rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--oak);
}
.contact-title {
  margin: 22px 0 clamp(40px, 8vh, 72px);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2.4rem, 7vw, 5.6rem);
  line-height: 1.05;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px clamp(36px, 7vw, 96px);
}
.contact-links a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.contact-links small {
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--oak);
}
.contact-links span {
  position: relative;
  padding-bottom: 6px;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  letter-spacing: .06em;
}
.contact-links span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .7s var(--ease);
}
.contact-links a:hover span::after,
.contact-links a:focus-visible span::after { transform: scaleX(1); transform-origin: left; }

.contact-foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 34px;
  display: flex;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
}

.palette {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  height: 8px;
}
.palette i { flex: 1; background: var(--c); transition: flex .9s var(--ease); }
.palette i:hover { flex: 2.4; }

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.3s var(--ease), transform 1.3s var(--ease);
  transition-delay: var(--d, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------
   Gallery — filmstrip of full-height photographs
---------------------------------------------------------------- */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--espresso);
  visibility: hidden;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1s var(--ease-io), visibility 0s linear 1s;
}
.gallery.is-open {
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1s var(--ease-io);
}

.gallery-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--pad) 40px;
  font-size: .7rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  background: linear-gradient(rgba(20, 14, 10, .45), transparent);
  pointer-events: none;
}
.gallery-bar > * { pointer-events: auto; }
.gallery-name { opacity: 0; transition: opacity .6s ease; }
.gallery.is-past .gallery-name { opacity: 1; }
.gallery-count { font-variant-numeric: tabular-nums; }
.gallery-close {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.x { position: relative; width: 14px; height: 14px; }
.x::before, .x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 18px; height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
  transition: transform .6s var(--ease);
}
.x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.gallery-close:hover .x::before { transform: translate(-50%, -50%) rotate(135deg); }
.gallery-close:hover .x::after  { transform: translate(-50%, -50%) rotate(45deg); }

.gallery-track {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  outline: none;
  transition: opacity .4s ease;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.is-switching { opacity: 0; }
.gallery-track.is-dragging { user-select: none; }

.g-slide {
  position: relative;
  flex: 0 0 auto;
  height: 100%;
  overflow: hidden;
  background: var(--tone, var(--umber));
}
.g-slide img {
  height: 100%;
  width: auto;
  aspect-ratio: auto 3 / 4;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.1s var(--ease), transform 1.8s var(--ease);
}
.g-slide img.is-loaded { opacity: 1; transform: none; }

.gallery.is-open .g-slide:not(.g-start) {
  animation: slideIn 1.4s var(--ease) both;
  animation-delay: calc(.45s + var(--i, 0) * .07s);
}

/* first panel: title and description (the cover photo was just seen on the home page) */
.g-start {
  width: clamp(340px, 40vw, 640px);
  background: var(--espresso);
  background: color-mix(in srgb, var(--tone, var(--umber)) 18%, var(--espresso));
}
.g-next img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
}
.g-next::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 14, 10, .75), rgba(20, 14, 10, .15) 50%, transparent 70%);
}
.g-intro {
  position: absolute;
  z-index: 1;
  left: var(--pad);
  right: var(--pad);
  bottom: clamp(28px, 7vh, 72px);
  max-width: 760px;
}
.g-intro > * {
  opacity: 0;
  transform: translateY(24px);
}
.gallery.is-open .g-intro > * { animation: introIn 1.3s var(--ease) both; }
.gallery.is-open .g-intro > :nth-child(1) { animation-delay: .5s; }
.gallery.is-open .g-intro > :nth-child(2) { animation-delay: .58s; }
.gallery.is-open .g-intro > :nth-child(3) { animation-delay: .7s; }
.gallery.is-open .g-intro > :nth-child(4) { animation-delay: .82s; }
.g-intro h2 {
  margin: 16px 0 18px;
  font-weight: 300;
  font-size: clamp(2.2rem, 4.4vw, 4.6rem);
  line-height: .95;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.g-intro .project-kind { display: block; }
.g-intro .project-desc { max-width: 46ch; }
.g-hint {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  font-size: .68rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.g-hint .arrow { animation: nudge 2.2s var(--ease) infinite; }

/* last panel: next project */
.g-next { width: min(70vw, 1100px); display: block; }
.g-next-text {
  position: absolute;
  z-index: 1;
  left: clamp(24px, 4vw, 56px);
  right: clamp(24px, 4vw, 56px);
  bottom: clamp(28px, 7vh, 72px);
  display: grid;
  gap: 14px;
  justify-items: start;
}
.g-next-text small { font-size: .68rem; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.g-next-text strong {
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 4.4rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* previous / next buttons (horizontal filmstrip only) */
.gallery-navs {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery.is-open .gallery-navs { opacity: 1; transition: opacity .8s ease .9s; }
.gallery-nav {
  position: absolute;
  top: 50%;
  width: 64px;
  height: 64px;
  margin-top: -32px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(20, 14, 10, .3);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  pointer-events: auto;
  transition: opacity .4s ease, background-color .5s var(--ease), border-color .5s var(--ease), color .5s var(--ease);
}
.gallery-prev { left: var(--pad); }
.gallery-next { right: var(--pad); }
.gallery-nav .arrow { width: 22px; }
.gallery-prev .arrow { transform: rotate(180deg); }
.gallery-nav:hover,
.gallery-nav:focus-visible {
  background: var(--linen);
  border-color: var(--linen);
  color: var(--espresso);
}
.gallery-nav:hover .arrow { width: 30px; }
.gallery-nav:focus-visible { outline: 1px solid var(--brass); outline-offset: 4px; }
.gallery-nav:disabled { opacity: 0; pointer-events: none; }

.gallery-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  height: 2px;
  background: rgba(255, 255, 255, .14);
}
.gallery-progress i {
  display: block;
  height: 100%;
  background: var(--brass);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
}

/* ---------------------------------------------------------------
   Cursor (mouse only)
---------------------------------------------------------------- */
.cursor {
  position: fixed;
  left: 0; top: 0;
  z-index: 90;
  pointer-events: none;
  display: none;
}
.has-cursor .cursor { display: block; }
.has-cursor [data-cursor] { cursor: none; }
.cursor-dot {
  position: absolute;
  left: -44px; top: -44px;
  width: 88px; height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--linen);
  color: var(--espresso);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  transform: scale(0);
  transition: transform .55s var(--ease);
}
.cursor-label { margin-right: -.26em; }
.cursor.is-on .cursor-dot { transform: scale(1); }
.cursor.is-down .cursor-dot { transform: scale(.82); }

/* ---------------------------------------------------------------
   Keyframes
---------------------------------------------------------------- */
@keyframes rise    { to { transform: translateY(0); } }
@keyframes draw    { to { transform: scaleX(1); } }
@keyframes fade    { to { opacity: 1; } }
@keyframes bar     { to { transform: scaleX(1); } }
@keyframes introIn { to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: none; } }
@keyframes nudge   { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }

/* ---------------------------------------------------------------
   Small screens & portrait: the filmstrip runs vertically
---------------------------------------------------------------- */
@media (max-width: 760px), (orientation: portrait) and (max-width: 1024px) {
  .hero-services { display: none; }
  .hero-foot { justify-content: center; }

  .project-text { flex-direction: column; align-items: flex-start; }
  .project-desc { display: none; }

  .gallery-bar { grid-template-columns: 1fr auto; }
  .gallery-navs { display: none; }
  .gallery-name { display: none; }

  .gallery-track {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .gallery.is-open .g-slide:not(.g-start) { animation-name: slideUp; }
  .g-slide { width: 100%; height: auto; }
  .g-slide img { width: 100%; height: auto; aspect-ratio: auto 3 / 4; }
  .g-start { width: 100%; height: 72svh; flex-shrink: 0; }
  .g-start .project-desc { display: block; }
  .g-intro h2 { font-size: clamp(2.4rem, 11vw, 4rem); }
  .g-next { width: 100%; height: 75svh; flex-shrink: 0; }
  .g-next img { width: 100%; height: 100%; }
  .g-hint .arrow { transform: rotate(90deg); animation: none; }

  @keyframes slideUp { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 520px) {
  .contact-links { flex-direction: column; align-items: center; }
  .contact-foot { justify-content: center; text-align: center; bottom: 26px; }
}

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