/* Alternative home only. Shared portfolio values stay in portfolio-tokens.css. */
@property --alt-case-gradient-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 135deg;
}
.alt-page,
.alt-page * {
  box-sizing: border-box;
}
.alt-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-family-base);
  letter-spacing: var(--type-body-spacing);
}
.alt-page a { color: inherit; text-decoration: none; }
.alt-page .profile { display: grid; align-items: center; }
.alt-page .profile-photo-frame { overflow: hidden; border-radius: 50%; }
.alt-page .profile-photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 47% 38%; transform: scale(1.1); }
.alt-container { width: min(1540px, calc(100% - 64px)); margin: 0 auto; padding-bottom: 112px; }
.alt-hero { padding: 64px 0 72px; }
.alt-hero-title {
  margin: 0;
  max-width: 1200px;
  color: var(--text);
  font-size: var(--type-h1-size);
  line-height: var(--type-h1-line);
  font-weight: var(--type-h1-weight);
  letter-spacing: var(--type-h1-spacing);
}
.alt-lead {
  max-width: 900px;
  margin: 28px 0 0;
  color: var(--text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-spacing);
}
.alt-location {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-spacing);
  font-variant-numeric: tabular-nums;
}
.alt-location [data-valencia-clock] { white-space: nowrap; }
.alt-availability {
  color: #9be56b;
  white-space: nowrap;
}
.alt-availability-dot {
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.4em;
  vertical-align: 0.12em;
  border-radius: 50%;
  background: currentColor;
  animation: alt-availability-pulse 1.2s ease-in-out infinite;
}
@keyframes alt-availability-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.72); }
}
.alt-case-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
.alt-shot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(6, auto);
  grid-template-areas:
    "work01 work01 work09"
    "work02 marina marina"
    "work02 work03 work04"
    "short02 work05 work05"
    "work06 work05 work05"
    "work07 work08 short01";
  gap: 28px;
}
.alt-case { min-width: 0; display: block; color: var(--text); text-decoration: none; }
.alt-case--featured { grid-column: 1 / -1; }
.alt-case-media { --alt-case-gradient-angle: 135deg; aspect-ratio: 1; overflow: hidden; border-radius: 30px; background: var(--color-warm-white); }
.alt-case-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.alt-case--featured .alt-case-media { aspect-ratio: 5184 / 3123; }
.alt-case-media--placeholder { background: var(--color-warm-white); }
.alt-case-media--banking { background: linear-gradient(var(--alt-case-gradient-angle), #c7e85f 0%, #4ec9c2 100%); }
.alt-case-media--apm { background: linear-gradient(var(--alt-case-gradient-angle), #a15fc4 0%, #5968dc 100%); }
.alt-case-media--merchant { background: linear-gradient(var(--alt-case-gradient-angle), #f07f8f 0%, #f2bd69 100%); }
.alt-case-media--risk { position: relative; }
/* Reuse the case animation inside the existing cover at every viewport size. */
.alt-case-media--risk .rms-assignment-motion {
  --rms-assignment-background: linear-gradient(var(--alt-case-gradient-angle), #b65ac5 0%, #ec607b 100%);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  aspect-ratio: auto;
  overflow: hidden;
  border: 0;
  border-radius: inherit;
}
.alt-case-media--risk .rms-assignment-stage {
  position: absolute;
  inset: 0;
  border: 0;
  border-radius: 0;
}
.alt-case-media--risk .rms-assignment-interface { height: 88%; }
@media (prefers-reduced-motion: reduce) {
  .alt-case-media--risk .rms-assignment-interface > * { animation: none; }
  .alt-availability-dot { animation: none; }
  .alt-case-media > img,
  .alt-case-media--risk .rms-assignment-motion,
  .alt-case-name { transition: none !important; }
  .alt-case-media { transition: none !important; }
  .alt-case:hover .alt-case-media > img,
  .alt-case:focus-visible .alt-case-media > img,
  .alt-case:hover .alt-case-media--risk .rms-assignment-motion,
  .alt-case:focus-visible .alt-case-media--risk .rms-assignment-motion { transform: none !important; }
}
.alt-case-caption, .alt-shot-caption {
  max-width: 68ch;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-spacing);
}
.alt-case-name {
  color: var(--text);
  font-weight: 600;
}
.alt-shot-title { color: var(--text); }
.alt-case-prefix { color: var(--color-accent); }
.alt-case-update { display: none; color: #bce6a2; }
.alt-section-note {
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-spacing);
}
.alt-selected { margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--line); }
.alt-section-heading { margin-bottom: 36px; }
.alt-section-title {
  margin: 0;
  color: var(--text);
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-line);
  font-weight: var(--type-h3-weight);
  letter-spacing: var(--type-h3-spacing);
}
.alt-section-note { color: var(--muted); margin: 16px 0 0; }
.alt-shot { width: 100%; min-width: 0; margin: 0; aspect-ratio: 1; align-self: start; }
.alt-shot[hidden], .alt-shot-caption[hidden] { display: none; }
.alt-shot-media { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 30px; background: var(--color-warm-white); }
.alt-shot-media--live-demo { background: linear-gradient(135deg, #dbf9d1 0%, #eef6bd 100%); }
.alt-shot-media--crypto-card { background: linear-gradient(135deg, #b7ddf4 0%, #8bddbf 100%); }
.alt-shot-media--stable-transition { background: linear-gradient(135deg, #e4dfff 0%, #ffd2e0 100%); }
.alt-shot-media--account-types { background: linear-gradient(135deg, #c1e2ff 0%, #dad9ff 100%); }
.alt-shot-media--mobile-account-selection { background: linear-gradient(135deg, #e994b8 0%, #f2b36f 100%); }
.alt-shot-media--weekly-investing { background: linear-gradient(135deg, #4d9ed2 0%, #66ddb5 100%); }
.alt-shot-media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.alt-shot--wide { aspect-ratio: 2 / 1; }
.alt-shot--portrait { aspect-ratio: auto; align-self: stretch; }
.alt-shot[data-slot="01"] { grid-area: work01; }
.alt-shot[data-slot="02"] { grid-area: work02; }
.alt-shot[data-slot="03"] { grid-area: work03; }
.alt-shot[data-slot="04"] { grid-area: work04; }
.alt-shot[data-slot="05"] { grid-area: work05; }
.alt-shot[data-slot="06"] { grid-area: work06; }
.alt-shot[data-slot="07"] { grid-area: work07; }
.alt-shot[data-slot="08"] { grid-area: work08; }
.alt-shot[data-slot="09"] { grid-area: work09; }
.alt-quote {
  min-width: 0;
  margin: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line);
  font-weight: var(--type-body-weight);
  letter-spacing: var(--type-body-spacing);
}
.alt-quote--marina { grid-area: marina; }
.alt-quote[data-quote="01"] { grid-area: short01; }
.alt-quote[data-quote="02"] { grid-area: short02; }
.alt-quote blockquote, .alt-quote blockquote p { margin: 0; }
.alt-quote blockquote p + p { margin-top: 18px; }
.alt-quote-author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 0;
  color: var(--muted);
  font-size: var(--type-body-small-size);
  line-height: var(--type-body-small-line);
  font-weight: var(--type-body-small-weight);
  letter-spacing: var(--type-body-small-spacing);
}
.alt-quote-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; }
.alt-quote-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.35); transform-origin: 50% 35%; }
.alt-quote-avatar--mikhail img { transform: scale(2.2); transform-origin: 54% 18%; }
.alt-page a:not(.contact-card):focus-visible, .alt-case:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
@media (min-width: 1200px) {
  .alt-case-media { transition: --alt-case-gradient-angle 420ms cubic-bezier(.2, .8, .2, 1); }
  .alt-case-media > img,
  .alt-case-media--risk .rms-assignment-motion {
    transform-origin: center;
    transition: transform 320ms cubic-bezier(.2, .8, .2, 1);
  }
  .alt-case-name { transition: color 240ms ease; }
  .alt-case:hover .alt-case-media > img,
  .alt-case:focus-visible .alt-case-media > img,
  .alt-case:hover .alt-case-media--risk .rms-assignment-motion,
  .alt-case:focus-visible .alt-case-media--risk .rms-assignment-motion { transform: scale(1.025); }
  .alt-case:hover .alt-case-name,
  .alt-case:focus-visible .alt-case-name { color: var(--accent); }
  .alt-case:hover .alt-case-media,
  .alt-case:focus-visible .alt-case-media { --alt-case-gradient-angle: 315deg; }
  .alt-case-update { display: inline; }
  .alt-case[data-desktop-only-link] .alt-case-prefix { display: none; }
  .alt-shot--wide, .alt-shot--large { aspect-ratio: auto; align-self: stretch; }
  .alt-quote--marina { width: 90%; justify-self: start; }
  .alt-quote[data-quote="01"] { padding-block: 0; }
  .alt-quote[data-quote="01"] .alt-quote-author { margin-top: 16px; }
}
@media (max-width: 1199px) {
  .alt-container { width: min(980px, calc(100% - 36px)); padding-bottom: 80px; }
  .alt-hero { padding: 40px 0 56px; }
  .alt-lead { max-width: none; }
  .alt-case-grid { gap: 36px 16px; }
  .alt-shot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-template-areas:
      "work01 work01"
      "work09 work02"
      "work03 work02"
      "marina marina"
      "work04 work06"
      "short02 short02"
      "work05 work05"
      "work07 work08"
      "short01 short01";
    gap: 20px;
  }
  .alt-quote { width: min(760px, calc(100% - 48px)); justify-self: start; padding: 24px; }
  .alt-case-media, .alt-shot-media { border-radius: 24px; }
  .alt-selected { margin-top: 80px; }
}
@media (max-width: 1199px) and (orientation: portrait) {
  .alt-lead { max-width: 68ch; }
}
@media (max-width: 767px) {
  .alt-container { width: calc(100% - 28px); padding-bottom: 64px; }
  .alt-hero { padding: 32px 0 48px; }
  .alt-lead { margin-top: 24px; }
  .alt-lead, .alt-location { font-size: var(--type-body-small-size); line-height: var(--type-body-small-line); font-weight: var(--type-body-small-weight); letter-spacing: var(--type-body-small-spacing); }
  .alt-case-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .alt-shot-grid { gap: 16px; }
  .alt-quote { width: 100%; padding-inline: 0; }
  .alt-case-media, .alt-shot-media { border-radius: 20px; }
  .alt-case--featured .alt-case-media { aspect-ratio: auto; height: calc(113vw - 31px); }
  .alt-case-caption, .alt-shot-caption { margin-top: 20px; }
  .alt-selected { margin-top: 64px; padding-top: 36px; }
  .alt-section-heading { margin-bottom: 28px; }
  .alt-section-title { max-width: 16ch; }
}

/* About: shared visual styling; desktop footer alignment is adjusted below. */
      .about {
        width: min(1540px, calc(100% - 64px));
        margin: 0 auto 100px;
        padding: 88px 0 40px;
        border-top: 1px solid var(--line);
        display: grid;
        grid-template-columns: minmax(320px, 0.72fr) minmax(640px, 1.28fr);
        gap: 66px;
      }
      .about-kicker,
      .alt-footer-grid .contact-kicker {
        font-size: var(--type-h5-size);
        text-transform: none;
        color: var(--text);
        line-height: var(--type-h5-line);
        font-weight: var(--type-h5-weight);
        letter-spacing: var(--type-h5-spacing);
      }
      .about h2 {
        font-size: var(--type-h3-size);
        margin: 0 0 24px;
        line-height: var(--type-h3-line);
        font-weight: var(--type-h3-weight);
        letter-spacing: var(--type-h3-spacing);
      }
      .about p {
        font-size: var(--type-body-size);
        color: var(--color-copy-secondary);
        max-width: 760px;
        margin: 0;
        line-height: var(--type-body-line);
        font-weight: var(--type-body-weight);
        letter-spacing: var(--type-body-spacing);
      }
      .about-content {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px;
        align-items: start;
      }
      .about-copy { min-width: 0; }
      .about-photo {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        object-fit: cover;
        object-position: center;
        border-radius: 30px;
      }
@media (max-width: 1199px) {
        .about-photo { border-radius: 24px; }
        .about {
          grid-template-columns: 1fr;
          width: min(980px, calc(100% - 36px));
          gap: 28px;
          padding-top: 60px;
        }
}
@media (max-width: 1199px) and (orientation: portrait) {
        .about-kicker,
        .alt-footer-grid .contact-kicker {
          display: none;
        }
}
@media (max-width: 767px) {
        .about-content { grid-template-columns: 1fr; }
        .about-photo { border-radius: 20px; }
        .about-kicker,
        .alt-footer-grid .contact-kicker {
          display: none;
        }
        .about {
          width: calc(100% - 28px);
          margin-bottom: 70px;
          padding-top: 52px;
        }
}

/* Align About and Contacts with the right two columns of Selected Design Works. */
@media (min-width: 1200px) {
  .alt-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 28px; }
  .alt-footer-grid > .alt-footer-content { grid-column: 2 / span 2; min-width: 0; }
  .alt-footer-grid .contact-cards { column-gap: 28px; }
  .alt-footer-grid.about p { max-width: none; }
}