/* Treatments follow /tmp/equinovate-landing-20261006-brief.md: hero, pill header, white bordered card. */
:root { color-scheme: light; --paper: #f5f3ec; --ink: #191917; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 3px solid var(--ink); outline-offset: 6px; }
.skip-link { position: fixed; left: 16px; top: -100px; padding: 12px; background: white; z-index: 10; }
.skip-link:focus { top: 16px; }
.hero { position: relative; isolation: isolate; min-height: 800px; min-height: max(800px, 100svh); display: grid; place-items: center; padding: 132px 24px 90px; overflow: hidden; }
.horse-collage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.horse { position: absolute; left: var(--x); top: var(--y); width: var(--size); aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--turn)); }
.horse img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scaleX(var(--flip)); transition: transform 240ms ease; }
@media (hover: hover) { .horse:hover img { transform: scaleX(var(--flip)) scale(1.09); } }
.masthead { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: min(680px, calc(100% - 48px)); min-height: 60px; padding: 16px 26px; display: flex; justify-content: space-between; align-items: center; gap: 16px; background: white; border: 1px solid var(--ink); border-radius: 100px; }
.masthead a { text-decoration: none; }
.wordmark { font-family: Georgia, 'Times New Roman', serif; font-size: 25px; letter-spacing: -.9px; }
.parent-link { font-size: 13px; }
.parent-link span { margin-left: 6px; }
.hero-card { width: min(540px, 100%); padding: 34px 44px 40px; text-align: center; background: #fff; border: 1.5px solid var(--ink); border-radius: 24px; box-shadow: 0 9px 0 rgba(25,25,23,.07); animation: arrive 850ms cubic-bezier(.2,.7,.2,1) both; }
.emblem { display: block; margin: 0 auto 12px; object-fit: contain; }
h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 400; font-size: clamp(52px, 6vw, 76px); letter-spacing: -4px; line-height: 1.05; margin: 0 0 22px; }
.tagline { font-family: Georgia, 'Times New Roman', serif; font-size: 27px; line-height: 1.25; letter-spacing: -.6px; margin: 0 0 19px; }
.supporting { font-size: 15px; line-height: 1.6; max-width: 340px; margin: 0 auto 28px; color: #50504b; }
.learn-button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 48px; padding: 14px 24px; background: var(--ink); color: white; border-radius: 8px; text-decoration: none; font-size: 14px; transition: transform 180ms ease; }
.learn-button:hover { transform: translateY(-2px); }
.about { max-width: 650px; margin: 0 auto; padding: 110px 28px 100px; scroll-margin-top: 40px; }
.eyebrow { font-size: 12px; letter-spacing: 1.3px; text-transform: uppercase; margin: 0 0 24px; }
h2 { font: 400 clamp(36px, 5vw, 50px)/1.12 Georgia, 'Times New Roman', serif; letter-spacing: -1.6px; margin: 0 0 24px; }
.about > p:not(.eyebrow) { font-size: 18px; line-height: 1.65; margin: 0 0 32px; }
.text-link { font-size: 14px; }
footer { max-width: 1200px; margin: 0 auto; padding: 26px 32px 32px; display: flex; justify-content: space-between; gap: 24px; font-size: 12px; }
@keyframes arrive { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
  .hero { min-height: max(844px, 100svh); padding: 150px 28px 130px; }
  .masthead { top: 22px; width: calc(100% - 32px); min-height: 54px; padding: 14px 18px; }
  .wordmark { font-size: 22px; }
  .parent-link { font-size: 11px; }
  .hero-card { padding: 28px 22px 32px; border-radius: 20px; }
  .emblem { width: 66px; height: 66px; margin-bottom: 15px; }
  h1 { font-size: 51px; letter-spacing: -2.8px; margin-bottom: 22px; }
  .tagline { font-size: 24px; }
  .desktop-break { display: none; }
  .supporting { font-size: 14px; }

  .about { padding: 80px 28px; }
  footer { padding-inline: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-card { animation: none; }
  .horse img, .learn-button { transition: none; }
  .horse:hover img { transform: scaleX(var(--flip)); }
  .learn-button:hover { transform: none; }
}

/* Each window displays one original character from the generated three-horse sheet. */
.horse {overflow:hidden;transition:transform 240ms ease;}
.horse img {position:absolute;top:0;left:0;width:300%;max-width:none;height:100%;object-fit:fill;transform:none!important;transition:none;}
.horse[data-asset="2"] img{left:-100%;}
.horse[data-asset="3"] img{left:-200%;}
.horse-window {position:relative;width:80px;height:80px;overflow:hidden;}
.horse-window img{position:absolute;width:300%;max-width:none;height:100%;left:0;top:0;}
@media(hover:hover){.horse:hover{transform:translate(-50%,-50%) rotate(var(--turn)) scale(1.08);}}
@media(prefers-reduced-motion:reduce){.horse{transition:none}.horse:hover{transform:translate(-50%,-50%) rotate(var(--turn));}}

/* Robots are small, original companions with the same gentle hover motion. */
.horse.robot img { width:100%; height:100%; left:0; object-fit:contain; }

/* Clean individual blanket horse; other horses retain their sprite windows. */
.horse[data-asset="3"] img {width:100%;height:100%;left:0;object-fit:contain;}
.hero-card {padding-top:32px;padding-bottom:34px;}
@media(max-width:600px){.hero-card{padding-top:30px;padding-bottom:30px;}}

/* Trueform Ink Aurora palette, scoped to the two landing cards. */
.masthead, .hero-card {
  --brand-ink: #060608;
  --brand-paper: #f1ede7;
  --brand-teal: #1fcba6;
  background: var(--brand-ink);
  color: var(--brand-paper);
  border-color: rgba(31, 203, 166, .42);
}
.masthead .wordmark, .hero-card h1 { color: var(--brand-teal); }
.masthead .parent-link { color: var(--brand-paper); }
.masthead .parent-link span { color: var(--brand-teal); }
.masthead a:focus-visible, .hero-card a:focus-visible { outline-color: var(--brand-teal); }
.hero-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(6, 6, 8, .22);
}
.hero-card::before {
  content: "";
  position: absolute;
  inset: -35%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 65% at 22% 65%, rgba(31, 203, 166, .32), transparent 72%),
    radial-gradient(ellipse 45% 60% at 66% 45%, rgba(110, 147, 245, .23), transparent 72%),
    radial-gradient(ellipse 40% 65% at 82% 75%, rgba(140, 107, 255, .26), transparent 72%);
  filter: blur(22px);
  animation: card-aurora 18s ease-in-out infinite alternate;
}
.hero-card .supporting { color: #c9c3ba; }
.hero-card .learn-button {
  background: linear-gradient(100deg, #1fcba6, #7df7d8 58%, #6e93f5);
  color: #060608;
}
@keyframes card-aurora {
  from { transform: translate(-5%, 4%) rotate(-8deg) scale(1); }
  to { transform: translate(6%, -5%) rotate(8deg) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-card::before { animation: none; }
}

/* Trueform typography and light-band treatment across the landing page. */
:root { --paper: #f1ede7; --ink: #060608; --font: "Space Grotesk", Arial, Helvetica, sans-serif; }
body, .wordmark, h1, h2, .tagline { font-family: var(--font); }
.wordmark { font-weight: 600; letter-spacing: -.8px; }
h1 { font-size: clamp(44px, 5.6vw, 68px); font-weight: 500; letter-spacing: -3px; }
.tagline { font-weight: 400; letter-spacing: -.7px; }
.about { max-width: 1040px; padding: 100px 48px 96px; }
.eyebrow { color: #10836c; font-size: 17px; font-weight: 600; letter-spacing: 0; text-transform: none; margin-bottom: 26px; }
h2 { font-weight: 500; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.1; letter-spacing: -2px; }
.about > p:not(.eyebrow) { max-width: 800px; font-size: 19px; }
.text-link { font-size: 16px; font-weight: 500; text-decoration-color: #15a88a; }
footer { max-width: 1200px; padding: 28px 48px 36px; font-size: 14px; border-top: 1px solid rgba(6,6,8,.12); }
footer > span { color: #10836c; font-weight: 600; }
footer a { text-decoration-color: #15a88a; }
@media (max-width: 600px) {
  h1 { font-size: clamp(35px, 10.8vw, 47px); letter-spacing: -2px; }
  .wordmark { font-size: 20px; }
  .tagline { font-size: 23px; }
  .about { padding: 76px 28px; }
  .eyebrow { font-size: 15px; }
  h2 { font-size: 38px; letter-spacing: -1.4px; }
  .about > p:not(.eyebrow) { font-size: 17px; }
  footer { padding: 26px 28px 32px; font-size: 12px; }
}

/* Transparent graphite sprite windows retain the finer equestrian linework. */
.graphite-horse img { width: 300%; height: 100%; object-fit: fill; left: 0; }
.graphite-horse[data-asset="2"] img { left: -100%; }
.graphite-horse[data-asset="3"] img { width: 300%; height: 100%; object-fit: fill; left: -200%; }

/* Explicit tile height avoids Safari clipping percentage-height sprite images
   when the absolutely positioned wrapper derives height from aspect-ratio. */
.graphite-horse { height: var(--size); }