/* ==========================================================================
   Klime Studio - 2026 site
   Centered, quiet, mostly white. Type and space do the work.
   ========================================================================== */

:root {
  /* Taken from the live site: old-site/style.css */
  --bg: #FDFDFC;
  --bg-soft: #F2F1EE;
  --fg: #121212;
  --fg-muted: #505358;
  --fg-faint: #979797;
  --line: rgba(6, 6, 6, 0.09);
  --line-strong: rgba(6, 6, 6, 0.18);

  --display: 'Inter Display', system-ui, -apple-system, sans-serif;
  --display-features: "blwf", "cv03", "cv04", "cv09", "cv11";

  --btn-radius: 10px;
  --card-radius: 14px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gutter: clamp(1rem, 2.5vw, 2rem);
  --measure: 1440px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 4px; }

.wrap {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Everything is centered unless a block opts out. */
section { padding-block: clamp(5rem, 10vw, 8.5rem); text-align: center; }

/* --- Type ---------------------------------------------------------------- */
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-size: 60px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -1.5px;
  color: var(--fg);
  font-feature-settings: var(--display-features);
  text-wrap: balance;
}

h3 {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  text-wrap: balance;
}

.lede {
  margin: 0 auto;
  max-width: 44rem;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -1.4px;
  color: var(--fg-faint);
  font-feature-settings: var(--display-features);
  text-wrap: balance;
}

.section-head { margin-bottom: clamp(3rem, 6vw, 4.5rem); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2.875rem;
  padding-inline: 1.35rem;
  border-radius: var(--btn-radius);
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease),
    color 0.4s var(--ease), transform 0.4s var(--ease);
}

.btn:active { transform: scale(0.985); }

.btn-dark { background: var(--fg); color: #fff; }
.btn-dark:hover { background: #24262c; }

.btn-light {
  background: #fff;
  color: var(--fg);
  border: 1px solid var(--line-strong);
}
.btn-light:hover { background: var(--bg-soft); }

/* --- Hero call to action ---------------------------------------------------
   Rest: dark pill, founder's face, label.
   Hover: a white ring lifts the pill and "+ You" opens out beside the face. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 0;
  height: 4.05rem;
  padding: 0.5rem 1.9rem 0.5rem 0.5rem;
  border-radius: 999px;
  background: #2c2c2e;
  color: #fff;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  transform: scale(1);
  box-shadow: 0 0 0 0 #fff, 0 8px 22px -16px rgba(6, 6, 6, 0.4);
  transition: transform 0.7s var(--ease), box-shadow 0.35s var(--ease),
    background-color 0.7s var(--ease);
}

.cta:active { transform: scale(0.99); transition: transform 0.12s var(--ease); }

/* Hover belongs to real pointers only. On a touch screen the tapped state
   sticks after the visitor comes back from the booking page, which left the
   button stuck open. */
@media (hover: hover) and (pointer: fine) {
  .cta:hover {
    background: #232325;
    box-shadow: 0 0 0 5px #fff, 0 6px 18px -14px rgba(6, 6, 6, 0.3);
    transition: box-shadow 0.08s linear, background-color 0.35s var(--ease);
  }

  /* Only the You circle carries the weight; the face and label stay steady. */
  .cta:hover .cta-you { animation: cta-you-land 0.72s linear both; }

  .cta:hover .cta-join {
    max-width: 9rem;
    margin-right: 0.35rem;
    opacity: 1;
    transition: max-width 0.26s var(--ease), margin-right 0.26s var(--ease),
      opacity 0.18s var(--ease);
  }
}

.cta-face {
  width: 2.95rem;
  height: 2.95rem;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #fff;
  background: #fff;
  margin-right: 0.75rem;
  flex: 0 0 auto;
}

/* Collapsed until hover, then it opens and pushes the label along. */
.cta-join {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 0;
  padding-block: 0.9rem;
  margin-block: -0.9rem;
  margin-right: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-width 0.7s var(--ease), margin-right 0.7s var(--ease),
    opacity 0.5s var(--ease);
}

.cta-plus { font-size: 1.3rem; font-weight: 700; line-height: 1; }

.cta-you {
  display: grid;
  place-items: center;
  width: 2.95rem;
  height: 2.95rem;
  margin-right: 0.4rem;
  border-radius: 999px;
  background: #f4f4f5;
  color: #121212;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  flex: 0 0 auto;
}

/* Clutch rating, values taken from the live site's .clutch-score and
   .clutch-stars. Sits directly under the call to action. */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 1.35rem;
}

.rating-score {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 16px;
  color: #060606;
}

.rating-stars {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 16px;
  color: #ef4135;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin-top: 2.25rem;
}

/* Pulse fired by "See more work" */
/* The You circle lands with weight. Nothing else in the pill moves. */
@keyframes cta-you-land {
  0%   { transform: scale(0.45); opacity: 0; }
  25%  { transform: scale(1.09); opacity: 1; }
  46%  { transform: scale(0.955); }
  64%  { transform: scale(1.035); }
  81%  { transform: scale(0.988); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(18, 18, 18, 0.4); }
  70%  { box-shadow: 0 0 0 22px rgba(18, 18, 18, 0); }
  100% { box-shadow: 0 0 0 0 rgba(18, 18, 18, 0); }
}
@keyframes pulse-lift {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(1.05); }
}

.is-pulsing { animation: pulse-ring 1.4s var(--ease) 3, pulse-lift 1.4s var(--ease) 3; }

/* --- Header --------------------------------------------------------------- */
.masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 1.5rem;
}

.masthead-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.masthead-links a { transition: color 0.4s var(--ease); }
.masthead-links a:hover { color: var(--fg); }

.masthead-start {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.masthead-start a { transition: color 0.4s var(--ease); }
.masthead-start a:hover { color: var(--fg); }

.masthead-time {
  font-family: "DM Mono", ui-monospace, monospace;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--fg-muted);
  font-variant-numeric: tabular-nums;
}

.masthead-brand { grid-column: 2; }

.masthead-mark { height: 24px; width: auto; margin-inline: auto; }

.masthead-links.is-end { grid-column: 3; justify-self: end; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  max-width: 1024px;
  /* The rating adds 42px below the button, so the bottom padding comes off by
     the same amount and the hero ends where it did before it was added. */
  padding-block: clamp(4.5rem, 11vw, 8.5rem) clamp(3.35rem, 6.7vw, 5.375rem);
  padding-inline: clamp(1rem, 2vw, 1.5rem);
  text-align: center;
}

.hero h1 { margin-inline: auto; max-width: 30ch; }

/* Looser than the section ledes, which keep the live site's -1.4px. */
.hero .lede { letter-spacing: -0.7px; }

.hero-note {
  margin-top: 2.5rem;
  font-size: 0.875rem;
  color: var(--fg-faint);
}

.hero-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.25rem clamp(1.75rem, 4vw, 3.25rem);
  max-width: 42rem;
  margin: 3.25rem auto 0;
}

.hero-logos img { height: 20px; width: auto; opacity: 0.6; }

.hero-logos .slot {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg-muted);
}

/* --- Process: title, copy, artwork; square-cornered cards ------------------ */
/* Process spans the full shell, on the same 8px rails as the work stack. */
#process .wrap {
  max-width: 1440px;
  padding-inline: 8px;
  text-align: left;
}

/* Centered headline above the cards. */
#process .section-head {
  margin-bottom: clamp(2rem, 3.5vw, 3rem);
  text-align: center;
}

.section-note {
  max-width: 34rem;
  margin: 0.75rem auto 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--fg-muted);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(50px, 1fr));
  width: 100%;
  gap: 12px;
}

.process-card {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 0.776;
  padding: clamp(1.5rem, 2.4vw, 2rem);
  overflow: hidden;
  border-radius: 8px;
  width: 100%;
  background: var(--bg-soft);
  text-align: left;
}

.process-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(22px, 1.9vw, 28px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-feature-settings: var(--display-features);
}

/* Step number sits ahead of the title, one shade back. */
.process-no {
  margin-right: 0.4em;
  color: var(--fg-faint);
}

.process-desc {
  margin: 0.75rem 0 0;
  max-width: 30ch;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--fg-muted);
}

/* Artwork sits centered in the space below the copy. */
.process-art {
  flex: 1;
  display: grid;
  place-items: center;
  min-height: 0;
  color: var(--fg-faint);
}

.process-art img {
  width: min(78%, 250px);
  height: auto;
  animation: pa-float 7s ease-in-out infinite;
}

.process-card:nth-child(2) .process-art img { animation-delay: 0.9s; }
.process-card:nth-child(3) .process-art img { animation-delay: 1.8s; }

/* Illustration motion: slow ambient loops. Nothing here is triggered by
   scroll or load, it just idles. */
@keyframes pa-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}


/* --- Work: full-bleed stack, measures matched to baseframe.design ---------- */
.work {
  background: var(--bg);
  padding-block: clamp(3rem, 6vw, 4rem);
}

/* Page shell is 1440px on baseframe; the stack sits inside it on 8px rails. */
.work-shell {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: 8px;
}

/* Content sections keep the hero's measure so every edge lines up. */
.founder .wrap,
#faq .wrap,
.footer .wrap { max-width: 1024px; }

.work-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 12px;
}

.piece {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f4f6;
}

.piece img {
  display: block;
  width: 100%;
  height: auto;
}

.work-more { margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center; }

/* --- Founder ---------------------------------------------------------------- */
.founder { background: var(--bg); }

.portrait {
  position: relative;
  display: block;
  width: 96px;
  margin: 0 auto 2rem;
}

.founder-portrait {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
}

/* Name bubble on hover or keyboard focus. */
.portrait-tip {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  transform: translate(-50%, 0.25rem);
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  background: var(--fg);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}

.portrait-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  border: 5px solid transparent;
  border-top-color: var(--fg);
  transform: translateX(-50%);
}

.portrait:hover .portrait-tip,
.portrait:focus-visible .portrait-tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.founder h2 { margin-bottom: 1.5rem; }

.founder-copy {
  max-width: 42rem;
  margin-inline: auto;
}

/* Base copy sits back in light grey; the claims step forward in near-black. */
.founder p {
  margin: 0 0 1.5rem;
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: #9a9ca3;
}

.founder p:last-child { margin-bottom: 0; }

.founder p strong {
  color: var(--fg);
  font-weight: 500;
}

/* App-icon style glyphs set inline with the sentence. */
.inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15em;
  height: 1.15em;
  margin-inline: 0.12em;
  vertical-align: -0.14em;
  border-radius: 0.3em;
  background: var(--bg-soft);
  color: var(--fg);
}

.inline-icon svg {
  display: block;
  width: 72%;
  height: 72%;
  margin: auto;
}

/* Real app icons fill the chip instead of sitting on the grey ground.
   Slightly smaller than the outline chips so the solid fill reads the same
   optical size, centred on the identical baseline. */
.inline-icon--app {
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.09em;
  border-radius: 0.27em;
  background: none;
  overflow: hidden;
}

.inline-icon--app img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* The FAQ closes the page, so it carries the bottom margin the footer used to. */
#faq { padding-bottom: clamp(8rem, 14vw, 12rem); }

/* --- FAQ --------------------------------------------------------------------- */
.faq-list {
  max-width: 42rem;
  margin-inline: auto;
  text-align: left;
  border-top: 1px solid var(--line);
}

.qa { border-bottom: 1px solid var(--line); }

.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.35rem;
  list-style: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--fg-muted); }

.qa .sign {
  position: relative;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  transition: transform 0.5s var(--ease);
}

.qa .sign::before,
.qa .sign::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.qa .sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] .sign { transform: rotate(135deg); }

.qa .answer {
  max-width: 36rem;
  color: var(--fg-muted);
  font-size: 0.9688rem;
}

.qa .answer p { margin: 0 0 1.4rem; }
.qa .answer a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* --- Footer -------------------------------------------------------------------- */
.footer {
  padding-block: 3rem 8rem;
  text-align: center;
  border-top: 1px solid var(--line);
}

.footer-mark { height: 20px; width: auto; margin: 0 auto 1.5rem; opacity: 0.9; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.9rem;
  color: var(--fg-muted);
}

.footer-links a:hover { color: var(--fg); }

.footer small { display: block; margin-top: 1.5rem; color: var(--fg-faint); font-size: 0.8rem; }

/* --- Sticky dock ---------------------------------------------------------------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: clamp(1rem, 3vw, 1.5rem);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  box-shadow: 0 12px 32px -12px rgba(11, 11, 12, 0.22);
  transform: translate(-50%, 130%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.6s var(--ease), opacity 0.4s var(--ease);
}

.dock.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }

.dock .to-top {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  height: 2.5rem;
  padding-inline: 1.1rem;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg-muted);
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease);
}

.dock .to-top:hover { color: var(--fg); background: var(--bg-soft); }
.dock .to-top svg { width: 13px; height: 13px; }

/* Arrow and label crossfade between the two states instead of snapping. */
.dock .to-top .arrow-slot {
  position: relative;
  display: block;
  width: 13px;
  height: 13px;
  flex: none;
}

.dock .to-top .arrow {
  position: absolute;
  inset: 0;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.dock .to-top .arrow-down { opacity: 0; transform: translateY(-5px); }
.dock .to-top.is-skip .arrow-up { opacity: 0; transform: translateY(5px); }
.dock .to-top.is-skip .arrow-down { opacity: 1; transform: none; }

.dock .to-top:hover .arrow-up { transform: translateY(-2px); }
.dock .to-top:hover .arrow-down { transform: translateY(2px); }
.dock .to-top:hover.is-skip .arrow-up { transform: translateY(5px); }
.dock .to-top:not(.is-skip):hover .arrow-down { transform: translateY(-5px); }

/* Both labels share one grid cell, so the pill keeps a steady width. */
.dock .to-top .label-slot {
  display: grid;
  align-items: center;
  justify-items: start;
  overflow: hidden;
  transition: width 0.32s var(--ease);
}

.dock .to-top .label { white-space: nowrap; }

.dock .to-top .label {
  grid-area: 1 / 1;
  transition: opacity 0.32s var(--ease), transform 0.32s var(--ease);
}

.dock .to-top .label-skip { opacity: 0; transform: translateY(-4px); }
.dock .to-top.is-skip .label-top { opacity: 0; transform: translateY(4px); }
.dock .to-top.is-skip .label-skip { opacity: 1; transform: none; }

.dock .btn { height: 2.5rem; border-radius: 999px; }

/* --- Responsive --------------------------------------------------------------------- */
/* --- Section rhythm ---------------------------------------------------------
   Sections abut, so the air between two of them is one's bottom padding plus
   the next one's top. The work band carries 4rem, which puts hero -> work and
   work -> process at ~200px. Process -> founder and founder -> faq were both
   pairing two full 8.5rem paddings and landing at 272px, so they read as a
   different rhythm. Pairing a 4rem bottom with the next full top matches the
   rest. Desktop only; mobile has its own scale. */
@media (min-width: 641px) {
  #process { padding-bottom: 4rem; }
  .founder { padding-bottom: 4rem; }
}

@media (max-width: 860px) {
  .masthead-links.is-end { display: none; }
  .process-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }

  /* Nothing in the bar but the mark, centred. */
  .masthead { grid-template-columns: 1fr; padding-block: 1.35rem; }
  .masthead-start { display: none; }
  .masthead-brand { grid-column: 1; }
  .masthead-links { display: none; }
  .masthead-mark { height: 26px; margin-inline: auto; }

  /* Sections were carrying desktop air on a 390px screen. */
  section { padding-block: 3.5rem; }
  .hero { padding-block: 3rem 3.5rem; }
  .work { padding-block: 2.5rem 3rem; }
  .footer { padding-block: 2.5rem 8.5rem; }

  h1, h2 { font-size: clamp(34px, 8.5vw, 60px); line-height: 1.06; letter-spacing: -1px; }
  .hero h1 br { display: none; }
  .lede { margin-top: 0.9rem; font-size: 18px; line-height: 1.4; letter-spacing: -0.4px; }
  .hero .lede { letter-spacing: -0.2px; }
  .section-head { margin-bottom: 2.5rem; }

  .process-grid { grid-template-columns: 1fr; }
  .process-card { aspect-ratio: auto; min-height: 0; }
  /* Smaller artwork, but the block keeps its height so the card does not
     shrink around it. The extra room becomes space above and below. */
  .process-art { padding-block: 2.25rem; min-height: 250px; }
  .process-art img { width: min(52%, 170px); }

  .work-grid { gap: 0.75rem; }
  .work-more { margin-top: 2rem; }

  .founder-portrait { width: 84px; height: 84px; margin-bottom: 1.5rem; }
  .founder p { font-size: 18px; line-height: 1.6; margin-bottom: 1.25rem; }

  .faq-list { margin-top: 0; }
  .qa summary { padding-block: 1.15rem; font-size: 1rem; }

  /* Hero call to action */
  .actions { margin-top: 1.75rem; }
  .cta { height: 3.5rem; font-size: 1.125rem; padding-right: 1.5rem; }
  .cta-face, .cta-you { width: 2.65rem; height: 2.65rem; }
  .cta-you { font-size: 0.95rem; }

  /* Dock: stacked card, Go to top over a full width Start Project */
  .dock {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.3rem;
    border-radius: 1.4rem;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 36px -14px rgba(11, 11, 12, 0.26);
    transform: translateY(140%);
  }

  .dock.is-visible { transform: translateY(0); }

  .dock .to-top {
    justify-content: center;
    height: 2.15rem;
    border-radius: 1.1rem;
    font-size: 1rem;
  }

  .dock .btn {
    height: 2.55rem;
    font-size: 1.05rem;
    font-weight: 500;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .is-pulsing { animation: none; box-shadow: 0 0 0 3px rgba(11, 11, 12, 0.3); }
  .process-art img { animation: none !important; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}