/* Division identity and navigation. Keep these wrappers in normal document
   flow so the existing sticky product scenes retain their geometry. */
.refined-direction .division-group {
  display: block;
  min-width: 0;
}

/* Transparent marks use their complete silhouettes, without tile backings. */
.refined-direction :is(.nav-icon-studio, .nav-icon-games, .nav-icon-labs, .nav-icon-works) {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.refined-direction .hero-index :is(.division-tile-mark-studio, .division-tile-mark-games, .division-tile-mark-labs, .division-tile-mark-works) {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.refined-direction :is(.nav-icon-studio, .nav-icon-games, .nav-icon-labs, .nav-icon-works, .division-tile-mark-studio, .division-tile-mark-games, .division-tile-mark-labs, .division-tile-mark-works) img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal !important;
  transform: none !important;
  filter: none !important;
  border-radius: 0;
  background: transparent;
}

.refined-direction .studio-seal,
.refined-direction .section-identity .studio-seal,
.refined-direction .section-identity .games-seal,
.refined-direction .studio-intro .section-lockup img,
.refined-direction .division-brand-mark {
  display: block;
  width: 100px;
  height: 100px;
  flex: 0 0 100px;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: normal !important;
  transform: none !important;
  filter: none !important;
}

.refined-direction .hero-index .division-tile-projects,
.refined-direction .division-members-label {
  display: block;
  max-width: 100%;
  margin-top: 8px;
  font: 400 11px/1.65 General, Arial, sans-serif;
  letter-spacing: .015em;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.refined-direction .division-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: 8%;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 76px 0 56px;
  border-top: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  scroll-margin-top: 30px;
}

.refined-direction .division-intro-main,
.refined-direction .division-intro-detail,
.refined-direction .division-heading-lockup > div {
  min-width: 0;
}

.refined-direction .division-heading-lockup {
  display: flex;
  align-items: center;
  gap: 22px;
}

.refined-direction .division-heading-lockup .eyebrow,
.refined-direction .hq-project .eyebrow,
.refined-direction .tidyloaf-project .eyebrow {
  color: #7e6c4e;
  font: 500 10px/1.6 General, Arial, sans-serif;
  letter-spacing: .1em;
}

.refined-direction .division-wordmark {
  margin-top: 9px;
  font: 400 18px/1.35 General, Arial, sans-serif;
  letter-spacing: -.025em;
}

.refined-direction .division-wordmark strong {
  font-weight: 600;
}

.refined-direction .division-intro h2 {
  margin: 30px 0 0;
  max-width: 15ch;
  font: 400 clamp(42px, 4.7vw, 68px)/1.1 Zodiak, Georgia, serif;
  letter-spacing: -.045em;
}

.refined-direction .division-intro h2 em {
  font: italic 400 1em/1.1 Zodiak, Georgia, serif;
  letter-spacing: inherit;
  color: inherit;
}

.refined-direction .division-intro-detail {
  padding-top: 14px;
}

.refined-direction .division-description {
  max-width: 47ch;
  margin: 0 0 27px;
  color: var(--muted);
  font: 400 16px/1.75 General, Arial, sans-serif;
}

.refined-direction .division-members {
  width: 100%;
  border-bottom: 1px solid var(--line);
}

.refined-direction .division-member {
  display: grid;
  grid-template-columns: 21px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 20px 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.refined-direction .division-member > span {
  min-width: 0;
}

.refined-direction .division-member .member-index {
  align-self: start;
  padding-top: 3px;
  font: 400 10px/1.7 Mono, monospace;
  color: #7e6c4e;
}

.refined-direction .division-member strong {
  display: block;
  font: 500 18px/1.3 General, Arial, sans-serif;
  letter-spacing: -.025em;
}

.refined-direction .division-member small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font: 400 12px/1.6 General, Arial, sans-serif;
}

.refined-direction .division-member > span:last-child {
  font: 400 21px/1 General, Arial, sans-serif;
  transition: transform 180ms ease;
}

.refined-direction .division-member:hover > span:last-child {
  transform: translate(2px, -2px);
}

.refined-direction .division-member:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 5px;
}

.refined-direction .hq-project {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 36px;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto 65px;
  padding: 27px 0 29px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  background: transparent;
  scroll-margin-top: 30px;
}

.refined-direction .hq-project > * {
  min-width: 0;
}

.refined-direction .hq-project h3 {
  margin-top: 10px;
  font: 400 29px/1.2 Zodiak, Georgia, serif;
  letter-spacing: -.035em;
}

.refined-direction .hq-project > p {
  max-width: 54ch;
  color: var(--muted);
  font: 400 14px/1.7 General, Arial, sans-serif;
}

.refined-direction .hq-project .project-status {
  justify-self: end;
  padding: 9px 11px;
  border: 1px solid var(--line);
  font: 400 10px/1.5 General, Arial, sans-serif;
  letter-spacing: .025em;
}

.refined-direction .tidyloaf-project {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
  align-items: start;
  gap: 9%;
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 0 86px;
  border-top: 1px solid var(--line);
  background: transparent;
}

.refined-direction .tidyloaf-project > #tidyloaf {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  scroll-margin-top: 30px;
}

.refined-direction .tidyloaf-project :is(.workshop-heading, .workshop-projects) {
  min-width: 0;
}

.refined-direction .tidyloaf-project .workshop-heading h2 {
  margin-top: 22px;
  font: 400 clamp(43px, 4.8vw, 68px)/1.1 Zodiak, Georgia, serif;
  letter-spacing: -.045em;
}

.refined-direction .tidyloaf-project .workshop-heading > p:last-child {
  max-width: 37ch;
  margin-top: 20px;
  color: var(--muted);
  font: 400 15px/1.7 General, Arial, sans-serif;
}

.refined-direction .tidyloaf-project .workshop-project {
  grid-template-columns: 24px minmax(0, 1fr) 44px;
  gap: 20px;
  padding: 28px 0;
}

.refined-direction .tidyloaf-project .workshop-project > div {
  min-width: 0;
}

@media (max-width: 1050px) {
  .refined-direction .division-intro { gap: 6%; }
  .refined-direction .division-heading-lockup { gap: 16px; }
  .refined-direction .hq-project { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 20px 32px; }
  .refined-direction .hq-project .project-status { grid-column: 2; justify-self: start; }
}

@media (max-width: 700px) {
  .refined-direction .hero-index :is(.division-tile-mark-studio, .division-tile-mark-games, .division-tile-mark-labs, .division-tile-mark-works) { width: 64px; height: 64px; }
  .refined-direction .hero-index .division-tile-projects { font-size: 10px; line-height: 1.65; margin-top: 6px; }
  .refined-direction .division-intro { width: 88%; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 47px 0 35px; }
  .refined-direction .division-brand-mark,
  .refined-direction .studio-seal,
  .refined-direction .section-identity .studio-seal,
.refined-direction .section-identity .games-seal,
  .refined-direction .studio-intro .section-lockup img { width: 80px; height: 80px; flex-basis: 80px; }
  .refined-direction .division-wordmark { font-size: 17px; margin-top: 7px; }
  .refined-direction .division-intro h2 { font-size: clamp(39px, 10.5vw, 58px); margin-top: 24px; }
  .refined-direction .division-intro-detail { padding-top: 0; }
  .refined-direction .division-description { font-size: 15px; line-height: 1.7; margin-bottom: 22px; }
  .refined-direction .division-member { padding: 18px 0; gap: 12px; }
  .refined-direction .division-member strong { font-size: 17px; }
  .refined-direction .division-member small { font-size: 11px; }
  .refined-direction .hq-project { width: 88%; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 25px 0 28px; margin-bottom: 42px; }
  .refined-direction .hq-project h3 { font-size: 28px; }
  .refined-direction .hq-project .project-status { grid-column: auto; justify-self: start; }
  .refined-direction .tidyloaf-project { width: 88%; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 45px 0 55px; }
  .refined-direction .tidyloaf-project .workshop-heading h2 { font-size: clamp(41px, 11vw, 58px); margin-top: 19px; }
  .refined-direction .tidyloaf-project .workshop-project { grid-template-columns: minmax(0, 1fr) 40px; gap: 14px; padding: 24px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .refined-direction .division-member > span:last-child { transition: none; }
}

/* Equal logo slots align the four division titles. */
@media(max-width:700px){.refined-direction .hero-index .division-tile-mark{width:64px;height:64px}.refined-direction .hero-index .division-tile-mark img{width:64px;height:64px}}

/* Each game's existing identity has a full, uncropped artwork area. */
.refined-direction .game-logo-stage{display:grid;place-items:center;width:100%;height:clamp(175px,19vw,245px);margin:22px 0 6px;background:#000;}
.refined-direction .game-logo-stage img{display:block;width:100%;height:100%;max-height:245px;object-fit:contain;object-position:center;}
@media(max-width:700px){.refined-direction .game-logo-stage{height:240px;margin-top:20px}.refined-direction .game-logo-stage img{max-height:240px}}

/* Match the visible extent of each symbol, not the PNG's empty margins.
   Factors use alpha>=128 bounds from the untouched generated originals. */
.refined-direction img[src$="studio-mark-v2.png"]{--mark-scale:.965}
.refined-direction img[src$="labs-mark-v2.png"]{--mark-scale:1.012}
.refined-direction img[src$="works-mark-v2.png"]{--mark-scale:1.080}
.refined-direction img[src$="games-mark-v2.png"]{--mark-scale:.974}
.refined-direction :is(.nav-icon,.division-tile-mark,.section-identity,.section-lockup,.division-heading-lockup) img[src$="-mark-v2.png"]{transform:scale(var(--mark-scale,1))!important;transform-origin:center;}