/* The identity is live vector lettering, not slices of a raster image. Its
   aspect ratio and per-letter cells stay fixed throughout the intro. */
.lettermark {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 880 / 250;
  pointer-events: none;
}
.brand-letter-cell {
  position: absolute;
  left: var(--letter-left);
  top: 0;
  width: var(--letter-width);
  height: 100%;
  perspective: 700px;
  perspective-origin: 50% 50%;
}
.brand-letter-flip {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotateY(0deg);
  transform-origin: 50% 50%;
  /* Both sides remain visible: no half-turn disappearing or opacity flash. */
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}
.brand-letter-flip svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* I runs from y=44 to y=203 in the 250-unit SVG: midpoint 123.5 / 250.
   Scaling only Y keeps its width crisp while both ends travel equally. */
.brand-letter-flip[data-brand-letter="I"] { transform-origin: 50% 49.4%; }
/* Apostrophe centre is (13.5, 50) in its 28 x 250 SVG, not the cell centre. */
.brand-letter-flip[data-brand-letter="apostrophe"] { transform-origin: 48.214286% 20%; }
.lettermark.is-flipping .brand-letter-flip { will-change: transform; }
.lettermark.is-flipping [data-brand-letter="apostrophe"] { will-change: transform, opacity; }
/* The tiny head bootstrap prepares the opening F, centre bar and punctuation
   before first paint. If the controller cannot load, these finite fallbacks
   restore the complete static identity after two seconds. No-JS is static. */
.brand-intro-ready .lettermark:is(:not([data-state]),[data-state="waiting"]) [data-brand-letter="F"] {
  transform: rotateY(-180deg);
  animation: brand-restore-f 1ms 2s forwards;
}
.brand-intro-ready .lettermark:is(:not([data-state]),[data-state="waiting"]) [data-brand-letter="I"] {
  transform: scaleY(.03);
  animation: brand-restore-i 1ms 2s forwards;
}
.brand-intro-ready .lettermark:is(:not([data-state]),[data-state="waiting"]) :is([data-brand-letter="L"],[data-brand-letter="P"],[data-brand-letter="D"]) {
  opacity: .2; transform: rotateY(-88deg);
  animation: brand-restore-letters 1ms 2s forwards;
}
.brand-intro-ready .lettermark:is(:not([data-state]),[data-state="waiting"]) [data-brand-letter="apostrophe"] {
  opacity: 0; transform: scale(.55);
  animation: brand-restore-punctuation 1ms 2s forwards;
}
@keyframes brand-restore-f { to { transform: rotateY(0deg); } }
@keyframes brand-restore-i { to { transform: scaleY(1); } }
@keyframes brand-restore-letters { to { opacity: 1; transform: rotateY(0deg); } }
@keyframes brand-restore-punctuation { to { opacity: 1; transform: scale(1); } }
.home-flow-hero .home-flow-detail { margin-top: 40px; }
@media (max-width: 760px) {
  .home-flow-hero .home-flow-label { margin-bottom: 36px; }
  .home-flow-hero .home-flow-detail { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .lettermark .brand-letter-flip { will-change: auto; }
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="F"],
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="L"],
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="P"],
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="D"],
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="I"],
  .brand-intro-ready .lettermark .brand-letter-flip[data-brand-letter="apostrophe"] {
    animation: none; transform: none; opacity: 1;
  }
}