@font-face { font-family: 'Sriracha Hero'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/fonts/sriracha-hero.ttf') format('truetype'); }

/* The action stays crisp; only the changing profession is handwritten. */
body.frontdoor-preview .hero-brand.hero-handwritten.hero-posting-line {
  --writing-height: clamp(58px, 8vw, 82px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .28em;
  width: min(100%, 736px);
  min-height: var(--writing-height);
  margin: 0 auto 16px;
  color: #f4f2ef;
  font: 500 clamp(24px, 3.4vw, 38px)/1.35 Anuphan, sans-serif;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.hero-posting-static { display: inline-block; flex: none; }
body.frontdoor-preview .hero h1 { font-family: Anuphan, sans-serif; font-weight: 500; }
.hero-posting-role {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 auto;
  min-width: 0;
  width: calc(var(--writing-height) * var(--writing-ratio, 3.085));
  height: var(--writing-height);
  color: #94b6ef;
}
.fd-writing-fallback {
  display: inline-block;
  color: #94b6ef;
  font: 400 clamp(38px, 6vw, 66px)/1 'Sriracha Hero', cursive;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-2deg);
}
.fd-writing-ink {
  display: block;
  width: 100%;
  height: var(--writing-height);
  max-width: 100%;
  overflow: visible;
}
.fd-writing-role { color: #94b6ef; }
.fd-writing-stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: fd-write linear both;
}
.fd-writing-paused .fd-writing-stroke { animation-play-state: paused; }
@keyframes fd-write { to { stroke-dashoffset: 0; } }
body.frontdoor-preview.frontdoor-light .hero-posting-line { color: #213e60; }
.frontdoor-light .fd-writing-role,
.frontdoor-light .fd-writing-fallback { color: #4b78b8; }
@media (max-width: 600px) {
  body.frontdoor-preview .hero-brand.hero-handwritten.hero-posting-line {
    --writing-height: 58px;
    gap: .2em;
    min-height: 58px;
    margin-bottom: 12px;
    font-size: clamp(19px, 5.5vw, 27px);
  }
  .fd-writing-fallback { font-size: clamp(31px, 9vw, 44px); }
  /* Keep the side artwork clear of the longest handwritten role. */
  body.frontdoor-preview .hero-peeker--nurse,
  body.frontdoor-preview .hero-peeker--doctor { top: var(--fd-upper-peek-top, 130px); width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .fd-writing-stroke { animation: none; stroke-dashoffset: 0; }
}