@font-face {
  font-family: "Young Serif";
  src: url("../assets/fonts/young-serif.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../assets/fonts/figtree-var.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  --ground: #fbf7f9;
  --ink: #2e1f38;
  --ink-soft: #5a4a66;
  --plum: #644473;
  --plum-deep: #3b2748;
  --mauve: #c3819b;
  --rose: #9c4f73;
  --blush: #f3dfe6;
  --marigold: #f2b84b;
  --sage: #8fb89a;
  --white: #fff;

  --display: "Young Serif", "Iowan Old Style", Georgia, serif;
  --text: "Figtree", "Segoe UI", system-ui, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --gutter: 1.25rem;
  --radius: 1.25rem;
  --dock-space: 5.25rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--mauve) var(--blush); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  overflow-x: clip;
  caret-color: var(--plum);
}
::selection { background: var(--marigold); color: var(--ink); }
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: .08em; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--plum); outline-offset: 3px; border-radius: 6px; }
.stories :focus-visible { outline-color: var(--marigold); }

h2, h3, .mission { font-family: var(--display); font-weight: 400; letter-spacing: -.015em; text-wrap: balance; }
.tone { color: var(--rose); }
.icon { width: 1.35em; height: 1.35em; flex: none; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--ink); color: var(--white); padding: .75rem 1rem; border-radius: .75rem; }
.skip:focus { top: 1rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: .8rem 1.4rem; border-radius: 999px;
  font-weight: 650; text-decoration: none; line-height: 1.1;
  transition: transform .35s var(--ease), background-color .2s, box-shadow .35s var(--ease);
}
.btn--primary { background: var(--ink); color: var(--white); box-shadow: 0 10px 24px -12px rgb(46 31 56 / .7); }
.btn--primary:hover { background: var(--plum); transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgb(46 31 56 / .7); }
.btn--quiet { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--quiet:hover { background: var(--blush); }
.btn--light { background: var(--marigold); color: var(--ink); }
.btn--light:hover { background: var(--white); transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---------- top menu ---------- */
.top { padding: 1rem var(--gutter) 0; position: relative; z-index: 2; }
.menu {
  display: flex; justify-content: space-between; gap: .25rem;
  max-width: 34rem; margin: 0 auto; padding: .3rem;
  background: var(--white); border-radius: 999px;
  box-shadow: 0 8px 24px -16px rgb(46 31 56 / .45);
}
.menu a { flex: 1; text-align: center; padding: .65rem .4rem; border-radius: 999px; font-size: .95rem; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.menu a:hover { background: var(--blush); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: clip;
  display: grid; gap: 2.5rem;
  padding: 1.5rem var(--gutter) 4rem;
  margin-top: -4.25rem; padding-top: 5.75rem;
}
.blob { position: absolute; border-radius: 50%; z-index: 0; }
.blob--mauve { width: 15rem; height: 15rem; left: -8rem; top: -7rem; background: var(--mauve); }
.blob--marigold { width: 13rem; height: 13rem; right: -8.5rem; top: 46%; background: var(--marigold); }
.hero__copy, .portrait { position: relative; }

.logo { width: min(100%, 27rem); aspect-ratio: 839 / 372; overflow: hidden; margin: 0 auto 0 -2%; }
.logo img { width: 100%; height: auto; margin-top: -22%; mix-blend-mode: multiply; }

.mission { font-size: clamp(2.1rem, 8.4vw, 4.25rem); line-height: 1.14; margin-top: 1rem; }
.mark {
  font-style: normal; white-space: nowrap; padding-bottom: .04em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8C40 2 70 10 104 5s62-3 94 2' fill='none' stroke='%23f2b84b' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% .16em;
}
.js .mark { background-size: 0% .16em; transition: background-size 1.1s var(--ease) .35s; }
.js .is-seen .mark, .js .mark.is-seen { background-size: 100% .16em; }
.lede { margin-top: 1.1rem; max-width: 34ch; color: var(--ink-soft); font-size: 1.1rem; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.6rem; }

.portrait { width: min(100%, 23rem); margin: 0 auto; padding: 0 1.25rem 0 0; }
.portrait__tile { position: relative; border-radius: 1.75rem; background: var(--marigold); aspect-ratio: 4 / 5; }
.portrait__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%;
  border-radius: 1.75rem; transform: translate(1.25rem, 1.25rem);
  box-shadow: 0 24px 40px -24px rgb(46 31 56 / .6);
}
.portrait figcaption { margin: 2.2rem 0 0 1.25rem; font-size: .95rem; color: var(--ink-soft); }

.tag {
  position: absolute; z-index: 2; display: inline-flex; align-items: center;
  padding: .32rem .7rem; border-radius: .5rem; font-size: .82rem; font-weight: 700; line-height: 1.2;
}
.tag__ptr { position: absolute; width: .7rem; height: .7rem; color: var(--ink); }
.tag--sage, .tag--sage .spot__label { background: var(--sage); color: var(--ink); }
.tag--plum, .tag--plum .spot__label { background: var(--plum); color: var(--white); }
.tag--marigold, .tag--marigold .spot__label { background: var(--marigold); color: var(--ink); }
.tag--a { left: -.6rem; top: 12%; }
.tag--a .tag__ptr { right: -.75rem; bottom: -.7rem; }
.tag--b { right: -.4rem; bottom: 24%; }
.tag--b .tag__ptr { left: -.8rem; top: -.75rem; transform: rotate(180deg); }
.spark { position: absolute; width: 1.4rem; height: 1.4rem; z-index: 1; }
.spark--a { color: var(--rose); right: .2rem; top: -1.6rem; }
.spark--b { color: var(--plum); left: 6%; bottom: 2.2rem; width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: no-preference) {
  .tag--a { animation: bob 6s ease-in-out infinite; }
  .tag--b { animation: bob 7s ease-in-out -2s infinite; }
  .spark { animation: twinkle 4.5s ease-in-out infinite; }
  .spark--b, .spark--d { animation-delay: -2s; }
}
@keyframes bob { 50% { transform: translateY(-7px); } }
@keyframes twinkle { 50% { transform: scale(.6) rotate(20deg); opacity: .55; } }

/* ---------- services: shared ---------- */
.services { position: relative; }
.stage { padding: 1.25rem 0 2rem; }
.stage__head { padding: 0 var(--gutter); }
.stage__head h2 { font-size: clamp(1.55rem, 6vw, 2.75rem); line-height: 1.08; }
.rail {
  display: flex; gap: .4rem; margin: .7rem calc(var(--gutter) * -1) 0; padding: .25rem var(--gutter);
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity;
}
.rail::-webkit-scrollbar { display: none; }
.rail button {
  flex: none; min-height: 2.5rem; padding: .35rem .9rem; border-radius: 999px; scroll-snap-align: center;
  font-size: .9rem; font-weight: 600; white-space: nowrap;
  box-shadow: inset 0 0 0 1.5px rgb(100 68 115 / .45);
  transition: background-color .25s, color .25s, box-shadow .25s;
}
.rail button:hover { background: var(--blush); }
.rail button[aria-current="true"] { background: var(--ink); color: var(--white); box-shadow: none; }

.figure { position: relative; width: min(62%, 15rem); margin: 1rem auto; }
.figure__frame { position: relative; aspect-ratio: 9 / 16; isolation: isolate; background: var(--ground); }
.figure__pose, .figure__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.figure__pose { opacity: 0; transition: opacity .7s var(--ease); }
.figure__pose.is-active { opacity: 1; }
.figure__clip {
  opacity: 0; pointer-events: none;
  /* lifts the clip's off-white ground to pure white so multiply leaves no rectangle */
  filter: brightness(1.085) contrast(1.04); mix-blend-mode: multiply;
  transition: opacity .25s linear;
}
.figure.is-moving .figure__clip.is-live { opacity: 1; }
.figure.is-moving .figure__pose { opacity: 0; transition-duration: .01s; }
.spark--c { color: var(--marigold); left: -18%; top: 14%; }
.spark--d { color: var(--sage); right: -16%; top: 58%; width: 1.1rem; height: 1.1rem; }

.spots { display: none; }

.region { padding: 2.25rem var(--gutter) 0; }
.region__text h3 { font-size: clamp(1.8rem, 7.5vw, 3.75rem); line-height: 1.02; }
.region__text p { color: var(--ink-soft); margin-top: .5rem; max-width: 32ch; }
.region__services { display: flex; flex-wrap: wrap; gap: .15rem .9rem; margin-top: .45rem; color: var(--ink-soft); font-weight: 600; font-size: .95rem; }
.region__services li { display: flex; align-items: center; gap: .45rem; }
.region__services li::before { content: ""; width: .45rem; height: .45rem; border-radius: 50% 0 50% 50%; background: var(--mauve); transform: rotate(45deg); }

.deck { margin-top: 1rem; }
.deck__cards { display: grid; gap: .75rem; }
.card {
  display: grid; grid-template-columns: 6.75rem 1fr; align-items: stretch;
  background: var(--white); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 14px 30px -22px rgb(46 31 56 / .55);
}
.card__art { display: grid; place-items: center; padding: .7rem; }
.card__art img { width: 100%; height: auto; }
.card--marigold .card__art { background: var(--marigold); }
.card--sage .card__art { background: var(--sage); }
.card--plum .card__art { background: var(--plum); }
.card__body { padding: .85rem 1rem; align-self: center; }
.card__body h4 { font: 700 1.05rem/1.2 var(--text); }
.card__body p { margin-top: .3rem; font-size: .92rem; line-height: 1.4; color: var(--ink-soft); }
.card--soon { grid-template-columns: 1fr; background: var(--blush); box-shadow: inset 0 0 0 2px rgb(100 68 115 / .3); }
.card--soon .card__body { padding: 1rem 1.1rem; }
.card--soon a { color: var(--plum); font-weight: 700; }

/* ---------- services: pinned stage (needs JS) ---------- */
.js .track { height: calc(100svh + 7 * 78svh); }
.js .stage {
  position: sticky; top: 0; height: 100svh;
  display: flex; flex-direction: column;
  padding: .9rem 0 var(--dock-space);
  overflow: clip;
}
.js .stage__body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.js .figure { flex: 1; min-height: 0; width: auto; margin: .5rem auto .25rem; display: grid; place-items: center; }
.js .figure__frame { height: 100%; max-height: 100%; }

.js .spots { display: block; position: absolute; inset: 0; transition: opacity .4s, visibility .4s; }
.js .stage:not(.is-rest) .spots { opacity: 0; visibility: hidden; }
.spot { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.spot::before { content: ""; position: absolute; inset: -1.4rem -5.5rem -1.4rem -1.4rem; }
.spot--l::before { inset: -1.4rem -1.4rem -1.4rem -5.5rem; }
.spot__dot {
  position: absolute; left: -.4rem; top: -.4rem; width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--ink); box-shadow: 0 0 0 3px var(--white);
}
.spot__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); opacity: 0; }
.spot__label {
  position: absolute; top: -.85rem; left: 1rem; white-space: nowrap;
  padding: .3rem .65rem; border-radius: .5rem; font-size: .78rem; font-weight: 700; line-height: 1.2;
  box-shadow: 0 8px 16px -10px rgb(46 31 56 / .6);
  transition: transform .35s var(--ease);
}
.spot--l .spot__label { left: auto; right: 1rem; }
.spot:hover .spot__label, .spot:focus-visible .spot__label { transform: scale(1.08); }
.spot:focus-visible { outline: none; }
.spot:focus-visible .spot__label { outline: 3px solid var(--plum); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .spot__dot::after { animation: ping 2.8s var(--ease) infinite; }
  .spot:nth-child(2n) .spot__dot::after { animation-delay: -1.2s; }
  .spot:nth-child(3n) .spot__dot::after { animation-delay: -2s; }
}
@keyframes ping { 0% { transform: scale(1); opacity: .7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.js .panels { position: relative; height: 16.25rem; flex: none; }
.js .region {
  position: absolute; inset: 0; padding: 0 var(--gutter);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .35s linear, transform .6s var(--ease), visibility 0s .35s;
}
.js .region.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: .12s, .12s, 0s; }
.js .region--intro { justify-content: center; text-align: center; align-items: center; }
.js .region--intro h3 { font-size: clamp(1.6rem, 6.5vw, 3rem); }
.js .region__text h3 { font-size: clamp(1.6rem, 6.5vw, 3.75rem); }

.js .deck { margin-top: auto; display: grid; grid-template-columns: 4px 1fr; grid-template-rows: auto auto; column-gap: .7rem; row-gap: .4rem; }
.deck__progress { grid-row: 1; border-radius: 4px; background: rgb(100 68 115 / .18); overflow: hidden; }
.deck__progress span { display: block; width: 100%; height: 100%; background: var(--plum); transform-origin: top; transform: scaleY(0); }
.deck.is-auto .deck__progress span { animation: fill var(--dwell, 4.6s) linear forwards paused; }
.deck.is-auto.is-running .deck__progress span { animation-play-state: running; }
@keyframes fill { to { transform: scaleY(1); } }
.js .deck__cards { grid-row: 1; grid-column: 2; display: grid; gap: 0; }
.js .card {
  grid-area: 1 / 1; height: 7.75rem;
  opacity: 0; visibility: hidden; transform: translateY(18px) scale(.98);
  transition: opacity .3s linear, transform .7s var(--ease), visibility 0s .3s;
}
.js .card.is-leaving { transform: translateY(-18px) scale(.98); }
.js .card.is-current { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.js .card__body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.deck__controls { grid-row: 2; grid-column: 2; display: flex; align-items: center; gap: .1rem; min-height: 2.25rem; }
.deck__dot { width: 2rem; height: 2.25rem; display: grid; place-items: center; }
.deck__dot::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: rgb(100 68 115 / .32); transition: width .4s var(--ease), background-color .2s; }
.deck__dot[aria-current="true"]::before { width: 1.4rem; border-radius: 999px; background: var(--plum); }
.deck__toggle { margin-left: auto; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border-radius: 50%; color: var(--plum); }
.deck__toggle:hover { background: var(--blush); }
.deck__toggle .icon { width: 1.1rem; height: 1.1rem; }

/* ---------- stories ---------- */
.stories { position: relative; background: var(--plum-deep); color: var(--white); padding: 4.5rem var(--gutter) 5rem; overflow: clip; }
.stories h2 { font-size: clamp(2rem, 7.5vw, 3.75rem); line-height: 1.05; max-width: 16ch; }
.stories .tone { color: var(--marigold); }
.stories__inner { max-width: 68rem; margin: 0 auto; display: grid; gap: 2.25rem; }
.story-slot {
  position: relative; padding: 2rem 1.5rem; border-radius: 1.75rem;
  background: var(--plum); max-width: 34rem;
  box-shadow: inset 0 0 0 2px rgb(255 255 255 / .16);
}
.story-slot__quote { width: 2.6rem; height: auto; color: var(--marigold); margin-bottom: 1.1rem; }
.story-slot__lead { font-family: var(--display); font-size: 1.45rem; line-height: 1.32; }
.story-slot p + p { margin-top: .9rem; color: #eadbe6; }
.story-slot .btn { margin-top: 1.5rem; }
.spark--e { color: var(--mauve); right: 8%; top: 3rem; width: 1.8rem; height: 1.8rem; }

/* ---------- about ---------- */
.about { padding: 4.5rem var(--gutter) 5rem; }
.about__inner { max-width: 68rem; margin: 0 auto; display: grid; gap: 2.5rem; }
.about__photo { width: min(72%, 17rem); border-radius: 1.75rem; background: var(--sage); transform: rotate(-3deg); }
.about__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 18%; border-radius: 1.75rem; transform: rotate(3deg) translate(.9rem, .6rem); box-shadow: 0 24px 40px -26px rgb(46 31 56 / .6); }
.about h2 { font-size: clamp(2rem, 7.5vw, 3.75rem); line-height: 1.05; }
.about__role { margin-top: 1rem; max-width: 58ch; font-size: 1.1rem; }
.todo { margin-top: 1.25rem; padding: 1rem 1.2rem; border-radius: var(--radius); border: 2px dashed rgb(100 68 115 / .4); max-width: 34rem; }
.todo h3 { font: 700 1.05rem/1.2 var(--text); letter-spacing: 0; }
.todo p { color: var(--ink-soft); }

.contact { background: var(--blush); border-radius: 1.75rem; padding: 1.75rem 1.25rem 1.5rem; }
.contact h2 { font-size: clamp(1.7rem, 6vw, 2.5rem); }
.contact__list { margin-top: 1rem; display: grid; gap: .5rem; }
.contact__list a {
  display: flex; align-items: center; gap: .9rem; min-height: 3.75rem; padding: .7rem 1rem;
  background: var(--white); border-radius: 1rem; text-decoration: none;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.contact__list a:hover { transform: translateX(4px); box-shadow: 0 12px 22px -16px rgb(46 31 56 / .6); }
.contact__list .icon { width: 1.6rem; height: 1.6rem; color: var(--plum); }
.contact__list span { display: grid; line-height: 1.3; overflow-wrap: anywhere; }
.contact__list b { font-size: .85rem; color: var(--ink-soft); font-weight: 600; }
.contact__note { margin-top: 1rem; font-weight: 700; }

/* ---------- footer ---------- */
.foot { background: var(--ink); color: #eadbe6; padding: 1.75rem var(--gutter) calc(var(--dock-space) + 1rem); display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; font-size: .92rem; }
.foot :focus-visible { outline-color: var(--marigold); }

/* ---------- dock ---------- */
.dock {
  position: fixed; z-index: 30; left: 50%; bottom: max(.9rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: .3rem; padding: .35rem;
  background: var(--white); border-radius: 999px;
  box-shadow: 0 16px 34px -14px rgb(46 31 56 / .55), 0 0 0 1px rgb(46 31 56 / .06);
}
.dock__btn { display: none; width: 3rem; height: 3rem; border-radius: 50%; place-items: center; transition: background-color .2s, opacity .2s; }
.js .dock__btn { display: grid; }
.dock__btn:hover { background: var(--blush); }
.dock__btn:disabled { opacity: .3; cursor: default; background: none; }
.dock__wa {
  display: inline-flex; align-items: center; gap: .5rem; height: 3rem; padding: 0 1.15rem 0 .95rem; border-radius: 999px;
  background: var(--ink); color: var(--white); font-weight: 700; text-decoration: none;
  transition: background-color .2s;
}
.dock__wa:hover { background: var(--plum); }

/* ---------- wider screens ---------- */
@media (min-width: 56rem) {
  :root { --gutter: clamp(2rem, 5vw, 5rem); --dock-space: 1.5rem; }

  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 3rem; padding-bottom: 5.5rem; padding-top: 7.5rem; max-width: 84rem; margin-inline: auto; overflow: visible; }
  .logo { width: min(100%, 33rem); }
  .lede { font-size: 1.2rem; max-width: 40ch; }
  .portrait { width: min(100%, 26rem); }
  .blob--mauve { width: 24rem; height: 24rem; left: -14rem; top: -13rem; }
  .blob--marigold { width: 18rem; height: 18rem; right: -13rem; top: 55%; }

  .stage__head { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
  .rail { margin: 0; padding: .25rem 0; flex-wrap: wrap; justify-content: flex-end; overflow: visible; }

  .js .stage { padding: 1.5rem 0 1.5rem; }
  .js .stage__body { --fig-w: min(26vw, calc((100svh - 9rem) * .5625)); }
  .js .figure { margin: .75rem auto 0; }
  .js .panels { position: absolute; inset: 0; height: auto; pointer-events: none; z-index: 2; }
  .js .region {
    padding: 0 var(--gutter);
    display: grid; grid-template-columns: minmax(0, 1fr) var(--fig-w) minmax(0, 1fr); align-items: center; column-gap: clamp(2rem, 5vw, 5rem);
  }
  .js .region > * { pointer-events: auto; }
  .js .region__text { grid-column: 1; justify-self: end; max-width: 24rem; width: 100%; }
  .js .region--intro { text-align: left; }
  .js .region--intro .region__text { align-self: end; padding-bottom: 12vh; }
  .region__services { flex-direction: column; gap: .35rem; margin-top: 1rem; font-size: 1.1rem; }
  .js .deck { grid-column: 3; margin: 0; width: min(100%, 21rem); column-gap: 1rem; }
  .js .card { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: auto; }
  .js .card__art { aspect-ratio: 4 / 3; padding: 0; position: relative; }
  .js .card__art img { position: absolute; inset: 1.1rem; width: calc(100% - 2.2rem); height: calc(100% - 2.2rem); object-fit: contain; }
  .js .card__body { padding: 1.1rem 1.25rem 1.3rem; align-self: start; }
  .js .card__body h4 { font-size: 1.2rem; }
  .js .card__body p { font-size: 1rem; -webkit-line-clamp: 5; }
  .js .card--soon { align-self: center; }
  .spot__label { font-size: .9rem; left: 1.4rem; }
  .spot--l .spot__label { right: 1.4rem; }

  .stories, .about { padding-block: 7rem; }
  .stories__inner { grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; }
  .story-slot { padding: 2.5rem; }
  .about__inner { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 3.5rem 4.5rem; align-items: start; }
  .about__photo { width: min(100%, 22rem); justify-self: center; }
  .contact { grid-column: 1 / -1; padding: 2.25rem; display: grid; grid-template-columns: auto 1fr; gap: 1rem 3rem; align-items: start; }
  .contact__list { margin: 0; grid-template-columns: 1fr 1fr; grid-row: span 2; }
  .foot { padding-bottom: 1.75rem; padding-right: 21rem; }

  .dock { left: auto; right: 1.5rem; bottom: 1.5rem; transform: none; }
}

@media (max-height: 40rem) and (max-width: 55.99rem) {
  .js .panels { height: 14.5rem; }
  .js .card { height: 6.5rem; }
  .js .region__text h3 { font-size: 1.45rem; }
  .region__services { font-size: .88rem; }
  .js .card__body p { -webkit-line-clamp: 2; }
  .stage__head h2 { font-size: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .js .mark { background-size: 100% .16em; }
}