/* This stylesheet is loaded only at widths up to 900px. */
.hero { min-height: 0; }
.hero-grid {
  display: block;
  min-height: 0;
  padding-block: 0;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: 7.5rem 0 3rem;
  text-align: center;
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}
.hero-title { font-size: 1rem; line-height: 1.08; letter-spacing: -0.045em; }
.hero-title .title-line {
  overflow: visible;
  transform: none !important;
  will-change: auto;
}
.hero-title .title-line > span {
  margin-inline: auto;
  transform: none !important;
  animation: none !important;
}
.hero-title .title-line:first-child > span {
  width: 100%;
  max-width: 100%;
  font-size: clamp(2.75rem, 13.3vw, 6rem);
  line-height: 1.02;
  white-space: normal;
}
.hero-title .title-line--accent { margin-top: 0.55rem; }
.hero-title .title-line--accent > span {
  max-width: 14ch;
  font-size: clamp(2.2rem, 10.5vw, 4.75rem);
  line-height: 1.12;
  letter-spacing: -0.035em;
  white-space: normal;
}
.hero-title--sheen .title-line > span::after { display: none; }
.hero-lower { align-items: center; width: 100%; margin-top: 1.5rem; gap: 1.6rem; }
.hero-lede { font-size: 0.98rem; line-height: 1.7; max-width: 38ch; margin-inline: auto; }
.hero-actions { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 1.2rem; }
.hero-primary-cta { width: fit-content; max-width: 100%; min-height: 3.1rem; padding: 0.85rem 1.15rem; font-size: 0.82rem; gap: 0.7rem; }
.hero-primary-cta svg { width: 1.05rem; height: 1.05rem; }
.hero-actions .text-link { display: inline-flex; font-size: 0.8rem; }
.hero-copy .hero-lower.reveal { opacity: 1 !important; transform: none !important; }

/* Below the opening screen, all three stage items occupy their own row. */
.hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 2.5rem 0 3rem;
  perspective: none;
  transform: none;
  will-change: auto;
  isolation: isolate;
}
.hero-stage-grid, .hero-horizon, .hero-core::before, .hero-core::after { display: none; }
.hero-stage .hero-card,
.hero-stage .hero-core {
  position: relative;
  inset: auto;
  width: 100%;
  min-height: 0;
  margin: 0;
  opacity: 1 !important;
  transform: none !important;
  translate: none !important;
  scale: 1 !important;
  clip-path: none !important;
  filter: none !important;
  animation: none !important;
  will-change: auto;
}
.hero-stage .hero-card { padding: 1.3rem 1rem; border: 0; border-radius: 0; box-shadow: none; text-align: center; }
.hero-stage .hero-card h2 { margin: 0; font-size: clamp(1.3rem, 5.4vw, 2rem); line-height: 1.15; }
.hero-stage .hero-card > p,
.hero-stage .hero-card ul,
.hero-stage .hero-card-pulse { display: none; }
.hero-stage .hero-core { display: block; grid-row: 1; }
.hero-stage .hero-card--left { grid-row: 2; }
.hero-stage .hero-card--right { grid-row: 3; }
.hero-stage .hero-logo-glass {
  min-height: 10rem;
  padding: 1rem;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
.hero-stage .hero-logo-image { width: 8rem; transform: none; }
.hero-stage .hero-logo-caption { bottom: 12%; font-size: 0.65rem; }
.hero-stage-media { z-index: -1; top: 0; bottom: 0; }
.metric-strip--glass { grid-template-columns: minmax(0, 1fr); }
.metric-strip--glass .metric-card:last-child { grid-column: auto; }

/* Short mobile entrances: no blur, long delays or scroll-scrubbed text. */
.reveal,
.process-step[data-process-step].reveal,
.principle--flip.reveal {
  opacity: 1;
  filter: none !important;
  transform: none !important;
  transition-duration: 420ms !important;
  transition-delay: 0ms !important;
  will-change: auto;
}
.reveal.mobile-reveal-pending:not(.is-visible) {
  opacity: 0;
  transform: translate3d(0, 0.65rem, 0) !important;
}
.reveal.is-visible,
.process-step[data-process-step].reveal.is-visible,
.principle--flip.reveal.is-visible { transform: none !important; }
.statement-line > span, .contact-statement-line > span {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
  will-change: auto;
}
.statement-line > span::after, .contact-statement-line > span::after { display: none; }
.work .case-gallery img { transition-duration: 280ms; will-change: auto; }

/* Portrait galleries use the phone's height to keep the lower images readable. */
.work .case-card--featured .case-visual,
.work .case-card--featured.case-card--wide .case-visual { aspect-ratio: 20 / 31; }
.work .case-card--featured:nth-child(2) .case-visual { aspect-ratio: 2 / 3; }
.work .case-gallery img {
  transition: transform 780ms cubic-bezier(0.22, 0.61, 0.36, 1);
  max-height: none;
  box-shadow: 0 0.6rem 1.5rem rgba(0, 0, 0, 0.3);
}
.work .case-gallery--fitt img:first-child { width: 54%; }
.work .case-gallery--fitt img:nth-child(2),
.work .case-gallery--fitt img:nth-child(3) { width: 66%; }
.work .case-gallery--coffee img { width: 68%; max-height: none; }
.work .case-card--featured.is-expanded .case-gallery--fitt img:first-child {
  transform: translate(-83.333%, -97%) rotate(-3deg);
}
.work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(2) {
  transform: translate(-28.788%, -24.545%) rotate(3deg);
}
.work .case-card--featured.is-expanded .case-gallery--fitt img:nth-child(3) {
  transform: translate(-53.03%, 56.263%) rotate(-3deg);
}
.work .case-card--featured.is-expanded .case-gallery--coffee img:first-child {
  transform: translate(-64.706%, -94.118%) rotate(-3deg);
}
.work .case-card--featured.is-expanded .case-gallery--coffee img:last-child {
  transform: translate(-35.294%, 5.147%) rotate(3deg);
}
.work .case-visual-note { transition: opacity 200ms ease; }
.work .case-card--featured.is-expanded .case-visual-note { opacity: 0; pointer-events: none; }

/* Remove continuously rasterized decoration from phones. */
#network-canvas { display: none !important; }
.hero-media__ambient, .hero-media__sheen,
.hero-stage-media__ambient, .hero-stage-media__sheen,
.work-media__ambient, .work-media__sheen,
.section-photo-backdrop__ambient, .section-photo-backdrop__sheen { display: none; }
.hero-media__image, .hero-stage-media__image,
.work-media__image, .section-photo-backdrop__image {
  animation: none !important;
  transform: none !important;
  will-change: auto;
}
.hero-card, .hero-logo-glass, .metric-card,
.site-header.is-scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.hero-card-pulse, .hero-primary-cta::before, .hero-logo-glass::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  .reveal { transition-duration: 0ms !important; }
}