/* Hairshopad homepage flow and service map, 2026-10-28. */
.home-dark .home-entry-intro { padding-bottom:12px; }
.home-dark .educator-rail-card { display:grid; position:relative; grid-template-columns:114px minmax(0,1fr); align-items:center; gap:12px; flex:0 0 330px; min-width:330px; width:330px; min-height:156px; padding:6px; overflow:hidden; border-left-width:1px; }
.home-dark .educator-rail-card img { display:block; width:114px; height:144px; border-radius:0; object-fit:cover; object-position:center !important; }
.home-dark .educator-rail-card > span { align-self:end; padding:0 4px 12px 0; display:grid; gap:5px; min-width:0; }
.home-dark .educator-rail-card strong { font-size:18px; }
.home-dark .educator-rail-card small { font-size:11px; line-height:1.3; white-space:normal; }
.home-dark .educator-rail-card > em { position:absolute; z-index:3; top:11px; right:11px; border-radius:0; background:rgba(8,12,12,.88); color:#8deafa; padding:6px 8px; font-size:10px; }
.home-dark .educator-rail-card-abc-classic::after { content:none; }
.home-dark .educator-rail-track { scroll-behavior:auto; }
.home-dark .educator-rail-card-recruit::before { background:linear-gradient(90deg,rgba(11,12,11,.03),rgba(11,12,11,.75)); }
.home-dark .educator-rail-card-recruit > em { background:var(--home-signal); color:#09100a; }

@media (max-width:600px) {
 .home-entry .educator-rail { margin-top:10px; padding-top:12px; padding-bottom:9px; }
 .home-dark .educator-rail-card { grid-template-columns:98px minmax(0,1fr); flex:0 0 306px; min-width:306px; width:306px; min-height:138px; padding:6px; gap:11px; }
 .home-dark .educator-rail-card img { width:98px; height:126px; }
 .home-dark .educator-rail-card > span { padding-bottom:10px; }
 .home-dark .educator-rail-card strong { font-size:16px; }
 .home-dark .educator-rail-card small { font-size:10px; }
}
@media (max-width:360px) {
 .home-dark .educator-rail-card { grid-template-columns:91px minmax(0,1fr); flex-basis:268px; min-width:268px; width:268px; gap:8px; }
 .home-dark .educator-rail-card img { width:91px; height:126px; }
}


.home-dark .service-rail { position:relative; margin:5px 0 0; border-block:1px solid var(--home-line); }
.home-dark .service-rail-top { display:flex; justify-content:space-between; align-items:center; min-height:19px; color:var(--home-signal); font-size:8px; font-weight:850; letter-spacing:.12em; }
.home-dark .service-rail-top span:last-child { color:var(--home-muted); }
.home-dark .service-rail-track { display:flex; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; }
.home-dark .service-rail-track::-webkit-scrollbar { display:none; }
.home-dark .service-rail-item { flex:0 0 calc(100% / 8); min-width:86px; min-height:77px; display:grid; grid-template-rows:8px 25px minmax(13px,auto) 10px; justify-items:center; align-content:center; gap:2px; padding:5px 7px 7px; border-right:1px solid var(--home-line); color:var(--home-ink); text-align:center; text-decoration:none; scroll-snap-align:start; transition:color .2s,background .2s; }
.home-dark .service-rail-item:first-child { border-left:1px solid var(--home-line); }
.home-dark .service-rail-item:hover,.home-dark .service-rail-item:focus-visible { background:rgba(209,229,154,.10); color:var(--home-signal); box-shadow:inset 0 -2px var(--home-signal); outline:none; }
.home-dark .service-rail-item > span { justify-self:start; color:var(--home-muted); font-size:8px; font-weight:850; letter-spacing:.06em; }
.home-dark .service-rail-item > svg { width:24px; height:24px; }
.home-dark .service-rail-item > strong { align-self:center; font-size:10px; line-height:1.2; font-weight:760; white-space:nowrap; }
.home-dark .service-rail-item > small { color:var(--home-muted); font-size:7px; font-weight:750; line-height:1.2; white-space:nowrap; }
.home-dark .service-rail-item[data-state="member"] > small { color:#8deafa; }
.home-dark .service-rail-item[data-state="soon"] > small { color:#c9b88e; }
.home-dark .service-rail::after { content:''; position:absolute; right:0; bottom:0; z-index:2; width:15px; height:77px; background:linear-gradient(90deg,transparent,var(--home-bg)); pointer-events:none; }
.home-dark .service-rail[data-end="true"]::after { display:none; }
.home-dark .skill-directory-section { display:block; }
@media (max-width:600px) {
  .home-dark .service-rail-item { flex-basis:86px; min-height:76px; padding-inline:5px; }
  .home-dark .service-rail-item > strong { font-size:9px; }
  .home-dark .service-rail-top { min-height:17px; }
}
/* Service map interaction and responsive styling. */
.home-dark .service-rail {
  margin-top: 8px;
  border-block-color: rgba(224, 237, 205, .24);
}
.home-dark .service-rail-top {
  min-height: 38px;
  gap: 8px;
  font-size: 9px;
}
.home-dark .service-rail-title { white-space: nowrap; }
.home-dark .service-rail-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  min-width: 0;
}
.home-dark .service-rail-controls [data-service-scroll-hint] {
  color: var(--home-muted);
  font-size: 9px;
  letter-spacing: .08em;
  white-space: nowrap;
}
.home-dark .service-rail-next {
  width: 68px;
  height: 44px;
  flex: 0 0 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 5px 0 8px;
  border: 1px solid rgba(209, 229, 154, .68);
  border-radius: 4px;
  color: var(--home-signal);
  background: rgba(209, 229, 154, .055);
  box-shadow: inset 3px 0 var(--home-signal);
  font: inherit;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.home-dark .service-rail-next-label {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .04em;
}
.home-dark .service-rail-next-icon {
  display: block;
  width: 24px;
  height: 20px;
  flex: 0 0 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.home-dark .service-rail-next-icon-start,
.home-dark .service-rail[data-end="true"] .service-rail-next-icon-forward { display: none; }
.home-dark .service-rail[data-end="true"] .service-rail-next-icon-start { display: block; }
.home-dark .service-rail-next-icon .guide { opacity: .42; stroke-width: 1; }
.home-dark .service-rail-next:hover .service-rail-next-icon-forward,
.home-dark .service-rail-next:focus-visible .service-rail-next-icon-forward { transform: translateX(2px); }
.home-dark .service-rail-next:hover .service-rail-next-icon-start,
.home-dark .service-rail-next:focus-visible .service-rail-next-icon-start { transform: translateX(-2px); }
.home-dark .service-rail-next:focus-visible {
  outline: 2px solid var(--home-signal);
  outline-offset: 3px;
}
.home-dark .service-rail-next:hover,
.home-dark .service-rail-next:focus-visible {
  border-color: var(--home-signal);
  background: rgba(209, 229, 154, .17);
}
.home-dark .service-rail-next:active { transform: translateY(1px); }
.home-dark .service-rail-next[hidden] { display: none !important; }
.home-dark .service-rail-track {
  gap: 6px;
  padding: 5px 1px 10px;
  scroll-snap-type: x proximity;
}
.home-dark .service-rail-item,
.home-dark .service-rail-item:first-child {
  position: relative;
  box-sizing: border-box;
  flex: 0 0 calc((100% - 42px) / 8);
  min-width: 88px;
  min-height: 84px;
  margin: 0;
  padding: 7px 9px 8px;
  appearance: none;
  border: 1px solid rgba(222, 234, 210, .18);
  border-radius: 8px;
  background: rgba(236, 244, 223, .035);
  box-shadow: none;
  color: var(--home-ink);
  font: inherit;
  cursor: pointer;
  grid-template-rows: 9px 28px minmax(13px, auto) 11px;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s ease,
    border-color .22s ease, box-shadow .22s ease, color .22s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-dark .service-rail-item:first-child:not(.is-selected) {
  background: linear-gradient(135deg, rgba(209,229,154,.14), rgba(209,229,154,.025));
  border-color: rgba(209,229,154,.38);
}
.home-dark .service-rail-item > span.service-number {
  color: var(--home-muted);
  font-size: 9px;
}
.home-dark .service-rail-item > svg {
  width: 27px;
  height: 27px;
  transform-origin: center;
  transition: transform .26s cubic-bezier(.2,.8,.2,1);
}
.home-dark .service-rail-item > strong { font-size: 11px; }
.home-dark .service-rail-item > small { font-size: 8px; }
.home-dark .service-rail-item > span.service-arrow {
  position: absolute;
  top: 6px;
  right: 9px;
  justify-self: auto;
  color: currentColor;
  font-size: 15px;
  opacity: .36;
  transform: translate(-3px, 3px);
  transition: transform .22s ease, opacity .22s ease;
}
.home-dark .service-rail-item:hover,
.home-dark .service-rail-item:focus-visible {
  transform: translateY(-3px);
  background: rgba(209,229,154,.16);
  border-color: rgba(209,229,154,.7);
  color: var(--home-ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  outline: none;
}
.home-dark .service-rail-item:hover > svg,
.home-dark .service-rail-item:focus-visible > svg {
  transform: translateY(-2px) rotate(-7deg) scale(1.08);
}
.home-dark .service-rail-item:hover > span.service-arrow,
.home-dark .service-rail-item:focus-visible > span.service-arrow,
.home-dark .service-rail-item.is-selected > span.service-arrow {
  opacity: 1;
  transform: translate(0, 0);
}
.home-dark .service-rail-item:focus-visible {
  outline: 2px solid var(--home-signal);
  outline-offset: 2px;
}
.home-dark .service-rail-item:active { transform: translateY(1px) scale(.97); }
.home-dark .service-rail-item.is-selected,
.home-dark .service-rail-item.is-selected:hover,
.home-dark .service-rail-item.is-selected:focus-visible {
  border-color: var(--home-signal);
  background: var(--home-signal);
  box-shadow: 0 6px 20px rgba(209,229,154,.18);
  color: #11170f;
}
.home-dark .service-rail-item.is-selected > span.service-number,
.home-dark .service-rail-item.is-selected > small,
.home-dark .service-rail-item.is-selected[data-state="member"] > small,
.home-dark .service-rail-item.is-selected[data-state="soon"] > small {
  color: #273421;
}
.home-dark .service-rail::after { height: 85px; width: 17px; }
.home-dark .service-rail-preview[hidden],
.home-dark .hero-subtitle[hidden] { display: none !important; }
.home-dark .service-rail-preview {
  display: grid;
  align-content: center;
  gap: 2px;
  min-height: 58px;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--home-signal);
  animation: service-preview-enter .22s ease both;
}
.home-dark .service-rail-preview > span {
  color: var(--home-signal);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .12em;
}
.home-dark .service-rail-preview > strong {
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.2;
}
.home-dark .service-rail-preview > p {
  margin: 0;
  color: var(--home-muted);
  font-size: 11px;
  line-height: 1.35;
}
.home-dark .service-rail-preview > a {
  justify-self: start;
  color: var(--home-signal);
  font-size: 10px;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@keyframes service-preview-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
  .home-dark .service-rail-top { min-height: 44px; }
  .home-dark .service-rail-controls [data-service-scroll-hint] { font-size: 8px; }
  .home-dark .service-rail-next { width: 68px; height: 44px; flex-basis: 68px; }
  .home-dark .service-rail-track { gap: 6px; }
  .home-dark .service-rail-item,
  .home-dark .service-rail-item:first-child {
    flex: 0 0 91px;
    min-width: 91px;
    min-height: 82px;
    padding-inline: 6px;
  }
  .home-dark .service-rail-item > svg { width: 26px; height: 26px; }
  .home-dark .service-rail-item > strong { font-size: 10px; }
  .home-dark .service-rail-item > small { font-size: 8px; }
  .home-dark .service-rail-preview { min-height: 63px; }
}
@media (max-width: 360px) {
  .home-dark .service-rail-item,
  .home-dark .service-rail-item:first-child { flex-basis: 88px; min-width: 88px; }
  .home-dark .service-rail-title { font-size: 8px; }
  .home-dark .service-rail-controls { gap: 5px; }
  .home-dark .service-rail-next { width: 44px; flex-basis: 44px; padding: 0 3px 0 6px; }
  .home-dark .service-rail-next-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .home-dark .service-rail-item,
  .home-dark .service-rail-item > svg,
  .home-dark .service-rail-item > span.service-arrow,
  .home-dark .service-rail-next,
  .home-dark .service-rail-next-icon { transition: none; }
  .home-dark .service-rail-preview { animation: none; }
}

/* Compact hero spacing. */
.home-dark .home-entry { padding-top: 38px; }
.home-entry-intro { padding-bottom: 22px; }
.home-entry-kicker { margin-bottom: 12px; }
.home-dark .home-entry-summary .hero-subtitle {
  margin-bottom: 12px;
  line-height: 1.58;
}

@media (max-width: 940px) {
  .home-entry-intro { gap: 16px; }
}

@media (max-width: 580px) {
  .home-dark .home-entry { padding-top: 18px; }
  .home-entry-intro { padding-bottom: 14px; gap: 10px; }
  .home-entry-kicker { margin-bottom: 8px; }
  .home-dark .home-entry-summary .hero-subtitle { margin-bottom: 6px; }
}